Usage
A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.
Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.
Component | Priority | User action |
---|---|---|
Snackbar | Low priority | Optional: Snackbars disappear automatically |
Banner | Prominent, medium priority | Optional: Banners remain until dismissed by the user, or if the state that caused the banner is resolved |
Dialog | Highest priority | Required: Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) |
Principles
Appropriately interruptive
Banners are interruptive, but their level of interruption should match the information they contain and the context in which they appear.
Clear
Banners communicate a succinct message and what will happen if users interact with them.
Focused
Banners contain a single message and specific actions a user can take.
Anatomy
Banner container
A banner container is rectangular, extending the full width of a layout. The container should be placed in a consistent and prominent location throughout an...
A banner container is rectangular, extending the full width of a layout. The container should be placed in a consistent and prominent location throughout an app, sharing the same elevation as screen content.
Banner message
The banner message communicates a change or error within an app. Banners should be considered as part of your overall in-app messaging strategy.
The banner message communicates a change or error within an app.
Banners should be considered as part of your overall in-app messaging strategy.
Buttons
Buttons in banners should directly relate to a banner’s message and clearly represent the banner’s action. Buttons must be labelled with text, not icons, for...
Buttons in banners should directly relate to a banner’s message and clearly represent the banner’s action. Buttons must be labelled with text, not icons, for clarity. Banners can contain up to two
Place buttons under the banner message, or on the same line if there is enough room to fit both.
Supporting illustration
Banners can supplement their message using a supporting illustration.
Banners can supplement their message using a supporting illustration.
Placement
Banners should be placed at the top of a layout or screen. When scrolling, banners typically move with content and scroll off the screen.
Banners and top bars
Banners are placed at the top of the screen below the top app bar. They can be fixed, or scroll with content, depending on the...
Banners are placed at the top of the screen below the top app bar. They can be fixed, or scroll with content, depending on the environment:
- On mobile, they scroll off-screen with content, at the same elevation as app content.
- On desktop, they remain fixed at the top of the screen, at the same elevation as the top app bar.
Banners and persistent search
When a banner appears with a persistent search bar, it’s placed below the search bar.
When a banner appears with a persistent search bar, it’s placed below the search bar.
Banners and bottom navigation
When bottom navigation is present, banners should remain at the top of the screen. Bottom navigation bars allow movement between primary destinations in an app....
When bottom navigation is present, banners should remain at the top of the screen.
Banners in wide layouts
Banners in wide layouts span the entire width of the screen. They appear at the same elevation as the top app bar and remain on...
Banners in wide layouts span the entire width of the screen. They appear at the same elevation as the top app bar and remain on screen while content scrolls.
When vertical navigation is present, banners can appear above content rather than across the full width of the screen.
Banners and pannable content
Banners remain on screen when scrolling pannable content.
Banners remain on screen when scrolling pannable content.
Behavior
Appearing
Banners typically appear when a screen loads content. Banners that appear after a screen loads should animate on screen from the top of a layout....
Banners typically appear when a screen loads content.
Banners that appear after a screen loads should animate on screen from the top of a layout. If the banner is at the same elevation as content, it pushes content downwards.
Dismissing banners
Banners must remain on screen until dismissed by the user. Snackbars provide brief feedback about an operation through a message at the bottom of the...
Banners must remain on screen until dismissed by the user.
Theming
Basil Material theme
This recipe app’s banner has been customized using Material Theming. Areas of customization include color and typography. Basil is a recipe app that uses Material...
This recipe app’s banner has been customized using Material Theming. Areas of customization include color and typography.
Color
Basil’s banner uses custom color on four elements: the container, message, button, and divider.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#FFFBE6 100% |
Text | On Surface | Color Opacity |
#29302E 100% |
Button | Primary | Color Opacity |
#356859 100% |
Divider | On Surface | Color Opacity |
#29302E 12% |
Typography
Basil’s banner uses custom typography for message and button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Body 2 | Typeface Font Size Case |
Montserrat Medium 14 Sentence case |
Button | Button | Typeface Font Size Case |
Montserrat Bold 14 All caps |
Posivibes Material theme
This social media app’s banner has been customized using Material Theming. Areas of customization include color and typography. The Material Design color system can help...
This social media app’s banner has been customized using Material Theming. Areas of customization include color and typography.
Color
Posivibe’s banner uses custom color on four elements: the container, message, button, and divider.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#FFFFFF 100% |
Text | On Surface | Color Opacity |
#000000 100% |
Button | On Surface | Color Opacity |
#000000 100% |
Divider | On Surface | Color Opacity |
#000000 12% |
Typography
Posivibe’s banner uses custom typography for message and button text.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Body 2 | Typeface Font Size Case |
Roboto Condensed Regular 14 Sentence case |
Button | Button | Typeface Font Size Case |
Roboto Condensed Bold 14 All caps |
Specs
Mobile
- 54 Measurement 54
- 16 Measurement 16
- 36 Measurement 36
- 8 Measurement 8
- 8 Measurement 8
- 10 Measurement 10
- 360 Measurement 360
- C Measurement C
- Components open_in_new
Text Buttons
- 112 Measurement 112
- 16 Measurement 16
- 16 Measurement 16
- 8 Measurement 8
- 8 Measurement 8
- 8 Measurement 8
- 360 Measurement 360
- 36 Measurement 36
- 20 Measurement 20
- 12 Measurement 12
- Components open_in_new
Text Buttons
- 120 Measurement 120
- 16 Measurement 16
- 16 Measurement 16
- 16 Measurement 16
- 8 Measurement 8
- 360 Measurement 360
- 8 Measurement 8
- 8 Measurement 8
- 24 Measurement 24
- 36 Measurement 36
- 20 Measurement 20
- 4040
- Components open_in_new
Text Buttons
Desktop
- 52 Measurement 52
- 24 Measurement 24
- 8 Measurement 8
- 8 Measurement 8
- 8 Measurement 8
- 720 Measurement 720
- C Measurement C
- Components open_in_new
Text Buttons
- 90 Measurement 90
- 8 Measurement 8
- 8 Measurement 8
- 90 Measurement 90
- 24 Measurement 24
- 8 Measurement 8
- 30 Measurement 30
- 20 Measurement 20
- 22 Measurement 22
- 720 Measurement 720
- Components open_in_new
Text Buttons
- 72 Measurement 72
- 16 Measurement 16
- 24 Measurement 24
- 90 Measurement 90
- 8 Measurement 8
- 8 Measurement 8
- 8 Measurement 8
- 32 Measurement 32
- 20 Measurement 20
- 20 Measurement 20
- 16 Measurement 16
- 720 Measurement 720
- 4040
- Components open_in_new
Text Buttons