A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.



Banners can be styled with one of 9 different colors using the color prop. A basic banner should only be used when the banner color does not represent status or severity.

Default banner

Red banner

Orangered banner

Orange banner

Gold banner

Green banner

Cyan banner

Blue banner

Purple banner


When a banner is used to convey status it should be styled using the status prop. Additionally, it is advised to pass an icon inside the banner to convey the status in a way besides just color.

The screenReaderText prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.

In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.

Success banner
Success banner

Warning banner
Warning banner

Danger banner
Danger banner

Info banner
Info banner

Custom banner
Custom banner


childrenReact.ReactNodeContent rendered inside the banner.
classNamestringAdditional classes added to the banner.
color'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple'Color options for the banner, will be overwritten by any applied using the status prop.
isStickybooleanfalseIf set to true, the banner sticks to the top of its container
screenReaderTextstringText announced by screen readers to indicate the type of banner. This prop should only be passed in when the banner conveys status/severity.
status'success' | 'warning' | 'danger' | 'info' | 'custom'Status style options for the banner, will overwrite any color applied using the color prop.

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub