The Banner component is used to display important, concise information, and provide actions for users. It's often used for system-level notifications, alerts, or informational messages that are directly related to the user's current context.
Design
Structure
The Banner component consists of the following elements:
Container: This is the outermost part of the banner. It holds all other elements of the banner.
Icon (optional): This is used to visually represent the type of information being communicated.
Title (optional): This is a brief summary of the information.
Body: This provides additional detail about the information.
Dismiss (optional): This allows the user to dismiss the banner, if permitted.
Action button (optional): Allows the user to take an action from the banner
Types and variants
There are two types of banners:
Default: includes a visible container, additional padding, and a colored background
Subtle: reduced padding,
Neutral, Default
Neutral, Subtle
Info, Default
Info, Subtle
Success, Default
Success, Subtle
Warning, Default
Warning, Subtle
Error, Default
Error, Subtle
Guidelines
Banners are statically positioned block-level elements
Make banners dismissible by default, unless they convey critical information or communicate required action
Banners should be placed at the top of the page or section where it is most relevant. It should be immediately visible to the user.
Prefer toasts for timely errors and feedback
Use cases
Informing users that a certain option may be deprecated in the future
Alerting users that there are errors within a form submission
Warning users that a particular action may have implictions
Do
Use the appropriate banner style to communicate the message
Use subtle banner variants for messages that will always persist in the UI
Use the default variants for temporary or conditional messages
Add a dismiss action if the banner to temporary neutral, informative, and success banners
Don't
Modify the styles of the banner and its repsective variant, this includes changing colors, borders, padding, and icons
Use multiple banners in a container consecutively—limit to a single banner per container; ideally, it's best not to include more than a single banner on the page
Add lengthy content to the banner. Banner content should be no more than two lines in a standard-width container (anything 800px or greater)
Content
The content of the Banner should be concise and clear. The title should summarize the information and the description should provide additional detail if necessary. The action should be a clear call to action for the user.
Banners always include a message, and can optionally include:
An icon
A dismiss button
A title
Aside from the optional dismiss button and in-message links, avoid using other interactive content within the banner
Accessibility
Ensure the Banner has a role of "alert" for assistive technologies.
Use clear, concise language for the title and description.
Ensure the action (if present) is keyboard accessible and clearly announced by screen readers.
Use sufficient color contrast for text and background colors.
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova