Intro
A banner is a notification that appears at the top of the screen to inform users about internet connectivity, errors, or synchronization statuses. It allows users to take a recommended action or to ignore the notification. Banners remain on screen until dismissed by the user, or if the state that caused the banner is resolved.
Banner on compact (left) and regular (right)
Usage
Do
Use a banner when the user needs to be informed about a certain event or a change in system status.
Don't
Don’t use a banner to show component level messages.
- Keep the text of the notification message short and concise to avoid blocking other important content on the screen.
- Only show one banner at a time.
- Only add up to two actions on a banner.
- Banners should be displayed at the top of the screen, below a top app bar.
Anatomy
A. Icon or Image (Optional)
B. Text
The banner text can be one to three lines on compact and one or two lines on regular.
C. Buttons
A banner can provide up to two actions, which can be displayed as text buttons only.
Banner anatomy
Behavior and Interaction
Banners typically appear when a screen loads content and remain on screen until dismissed by the user.
Banner appearing and dismissing
Banner behavior with scrolling content
Variations
One-Line Text Banner
A. One-line text with one action
B. Icon or image and one-line text with two actions
C. One-line text with two actions
D. Error state one-line text
E. Error state one-line text with action
Banner with one-line text
Two-Line Text Banner
A. Two-line text with two actions
B. Icon or image and two-line text with two actions
C. Error state two-line text with action
Banner with two-line text
Three-Line Text Banner
Three-line text with two actions (only for compact devices)
Banner with three-line text (for compact devices only)
Banner with Other Value States
A. Three-line text with action
B. Other value status by using different semantic color
Banner with three-line text (for compact devices only)