Examples
Basic
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.
Status
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.
Props
Banner
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the banner. | |
| className | string | Additional 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. | |
| isSticky | boolean | false | If set to true, the banner sticks to the top of its container |
| screenReaderText | string | Text 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 column | Selector | Variable | Value |
|---|
View source on GitHub
