A banner displays a prominent message at the top of the screen.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/banner`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/banner, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`appearance`
Description	Visual style to be used for the banner
Type	`"warning" \| "error" \| "announcement"`

`children`
Description	Content to be shown next to the icon. Typically text content but can contain links.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`icon`
Description	Icon to be shown left of the main content. Typically an Atlaskit @atlaskit/icon
Type	`ReactElement<any, string \| JSXElementConstructor<any>>`

`ref`
Description	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
Type	`string \| Ref<HTMLDivElement>`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.