Basic usage
Used when displaying important information; for example: persistent condition, system status etc. to users. Can be dismissable if needed.
A banner status indicates the type of message (e.g. success, danger, warning, info, neutral).
Use BannerIcon to render the suggested icon in the correct colorVariant mapped to status
Dynamic width
Set display="inline-flex" to get a banner with a dynamic width.
Non-dismissible banner
System Banner
A system banner usually shows up on top of the page (below header), edge to edge to display system messages that are related to the entire page like current status or new features such as free shipping etc.
Custom content
You can render any children you want. Banner keeps internal state to track it's dismissed state, which also controls the
collapse animation. To access setIsDismissed, either get the value from context, or have children be a render prop.
Props
Accessibility
- Critical and warning banners have a
role="alert"and are announced by assistive technologies when they appear. - All other banners have a
role="status"and are read after any critical announcements.