Banners convey brief information related to a specific section of a page. The message can relay success, warning, error, or general information. The color and placement of the banner indicate the urgency of the message.
Banner text content
Button text
Text
Status
Has Icon
Dismissible
Button Icon Name
Button Text
Usage Guidelines
Do
Indicate urgency with color and placement. For example, a red “error” banner that shows up on the top center of the screen.
Display on related sections of the page to share messaging/guidance
Be concise. Keep the text to one or two sentences.
Use the arrow icon on the button to indicate progression through a task
Don't
If the user must interact with the banner to proceed with a task or flow, consider using a Modal instead.
Do not use an overly complex icon on the button.
Don’t use a banner for messages generated as an immediate response to user interaction. Instead, use a Toast.
Accessibility
The banner code should indicate the intent of the banner in a way that screen readers can parse. For example, Gestalt uses the iconAccessibilityLabel to communicate “success,” “error,” or “warning”.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
Medium article: 'Do’s and Don’ts, A11y'
Related
Toast, Modal
Examples
Dismissible
When you click this banner, it dismisses
Permanent
This permanent banner is not clickable or dismissible
Alert
This banner has status alert and is used to convey important or error related information
Warning
This banner has a warning status and is used to convey important information
Info
This banner has an info status is used to convey information
HasIcon
This banner has an icon
Button
This banner has a button. Buttons on banners have text and optionally have an icon.