Feedback & Status
Banner
Banners communicate essential information. They’re positioned at the top of the screen to be noticeable and require user action to disappear.
Interactive demo
This demo lets you preview the banner component, its variations and configuration options.
Banner message will display in this space
Banner message will display in this space
Anatomy
The banner component contains one required element and three optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
The banner has options for different use cases:
Orientation
Display banners horizontally or vertically to best use the space available on a screen. When vertical, stack content and make buttons full-width.
Intent
A banner has three intents: informative, notice and negative. Each communicates a specific tone to the user.
Icon
Display an icon as a visual cue and help users with colour blindness discern the message tone.
Title
Give the banner a title to provide extra context.
Actionable
Add a call-to-action (CTA) button with a contextual message as a starting point in a user journey.
Dismissible
Add a close button to let users dismiss the banner.
Orientation
Display banners horizontally or vertically to best use the space available on a screen. When vertical, stack content and make buttons full-width.
Intent
A banner has three intents: informative, notice and negative. Each communicates a specific tone to the user.
Icon
Display an icon as a visual cue and help users with colour blindness discern the message tone.
Title
Give the banner a title to provide extra context.
Actionable
Add a call-to-action (CTA) button with a contextual message as a starting point in a user journey.
Dismissible
Add a close button to let users dismiss the banner.
Behaviours
Here’s how the banner behaves:
Text overflow wrap
When the title and/or message in the banner is too long for the available horizontal space, it wraps to form another line.
Text overflow wrap
When the title and/or message in the banner is too long for the available horizontal space, it wraps to form another line.
Usage
Here’s how and when to use the banner:
Do use banners for essential, system-level information
Examples include internet connection issues, expirations of subscriptions, payment failures or major product changes. For confirmations of actions or promotional messages, use another feedback component (e.g. toast) instead.
Don’t show multiple banners at the same time
Banners should appear in order of importance.
Do add an action to help users solve the issue
Whenever possible, add an action in the banner so the user can quickly resolve the issue.
Don’t have more than one action in a banner
Having more than one action to choose from can make it difficult for users to decide what to do next. This doesn’t include the close button.
Do position below the navigation header
Banners should be positioned at the top of a page, below the navigation header.
Don’t let banners time out
Banners should only disappear on user interaction (dismissing or completing a task) or when the information is no longer relevant (e.g. updating failed payment details).
Do convey tone with the right intent
Use the appropriate intent to convey the tone of the banner message. If the tone is neutral, use the informative intent banner.
Do display again if unresolved
If a user dismisses a banner without resolving the issue, display it again at the next possible occasion, without overwhelming the user (e.g. the next time session).
Accessibility considerations
The banner meets the latest WAI-ARIA banner specifications.
| Order | Element | Role |
|---|
| Element | Attribute | Value | Description | User supplied |
|---|
SEO considerations
There are no SEO considerations for the banner.
API
The banner has a range of props to define the experience in different use cases.
| Name | Type | Default | Description | Required |
|---|