Banners

A banner displays a prominent message and related optional actions.


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 are persistent and nonmodal, allowing the user to ignore them or interact with them at any time.

Banners communicate messages which are important but don’t require user action. They are more prominent than snackbars, and less interruptive than dialogs.

Principles

Banners are interruptive, but their level of interruption should match the information they contain and the context in which they appear. Banners communicate a succinct...

Read More

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

1. Supporting illustration (optional)
2. Container
3. Text
4. Buttons


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...

Read More

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.

Only one banner should be shown at a time.

A banner appears above content and below a top app bar.

Don’t.

Only one banner should be shown at a time.

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.

Read More

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...

Read More

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 text buttons with the dismissive action placed on the left and the confirming action on the right.

Place buttons under the banner message, or on the same line if there is enough room to fit both.

Do.

Banners may have one or two low-emphasis text buttons.

Caution.

Avoid using a single button as a way to acknowledge a banner and dismiss it. A button to dismiss a banner should be paired with an action to address its message.

Caution.

Banners are intended to be minimally interruptive. If a button in a banner requires extra emphasis, a contained, full-width button can be used for a single, prominent action (though its prominence may be distracting).

Don’t.

Don’t include links in a banner message. All available actions should be represented as buttons.

Don’t.

Don’t combine buttons with different emphasis levels, which could appear to promote one action over another.

Caution.

Don’t stack buttons unless there isn’t sufficient room to display them side by side.

Don’t.

Don’t use a close affordance icon as the only method of dismissing a banner. All actions should be shown as text buttons.

Supporting illustration

Banners can supplement their message using a supporting illustration.

Read More

Banners can supplement their message using a supporting illustration.

Do.

Icons can help communicate a banner’s message.

Don’t.

An icon used as an illustration can be ambiguous and make a banner too prominent in a layout. Illustrations support the banner message and aren’t the primary method of communication.


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. Only one banner should be shown at a time.

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...

Read More

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.

Banner and a top bar

Don’t.

The surface containing a banner should be clearly distinguished from the top app bar surface.

Don’t.

Banners shouldn’t appear in front of the top bar.

Banners and persistent search

When a banner appears with a persistent search bar, it’s placed below the search bar.

Read More

When a banner appears with a persistent search bar, it’s placed below the search bar.

A banner appears below a persistent 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....

Read More

When bottom navigation is present, banners should remain at the top of the screen.

Banners appear at the top of the screen when bottom navigation is present.

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...

Read More

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.

desktop

A banner in a wide layout appears at the same elevation as the top app bar.

When vertical navigation is present, banners can appear above content rather than across the full width of the screen.

desktop

A banner on a screen with a navigation drawer appears slightly above just the content (on the y-axis), at the same elevation as that content.

desktop

Don’t.

Avoid stacking multiple banners.

Banners and pannable content

Banners remain on screen when scrolling pannable content.

Read More

Banners remain on screen when scrolling pannable content.

Banners remain on screen when scrolling pannable content, such as a map.


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....

Read More

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.

Banners at the same elevation as content push content downward as they enter from the top of a layout.

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...

Read More

Banners must remain on screen until dismissed by the user.

Banners can be dismissed by the user.

Do.

Banners persist until the user acts on them or dismisses them.


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 browsing app that demonstrates...

Read More

This recipe app’s banner has been customized using Material Theming. Areas of customization include color and typography.

Basil’s customized banner

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 helps you...

Read More

This social media app’s banner has been customized using Material Theming. Areas of customization include color and typography.

Posivibe’s customized banner

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

14dp #000000de Elevation 0dp Text Buttons All measurements are displayed in device-independent pixels (dps) 14dp #000000de Elevation 0dp Text Buttons All measurements are displayed in...

Read More
  • Measurement 54
  • Measurement 16
  • Measurement 36
  • Measurement 8
  • Measurement 8
  • Measurement 10
  • Measurement 360
  • Measurement C
  • Measurement 112
  • Measurement 16
  • Measurement 16
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 360
  • Measurement 36
  • Measurement 20
  • Measurement 12
  • Measurement 120
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 8
  • Measurement 360
  • Measurement 8
  • Measurement 8
  • Measurement 24
  • Measurement 36
  • Measurement 20
  • 4040

Desktop

14dp #000000de Elevation 0dp Text Buttons All measurements are displayed in device-independent pixels (dps) 14dp #000000de Elevation 0dp Text Buttons All measurements are displayed in...

Read More
  • Measurement 52
  • Measurement 24
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 720
  • Measurement C
  • Measurement 90
  • Measurement 8
  • Measurement 8
  • Measurement 90
  • Measurement 24
  • Measurement 8
  • Measurement 30
  • Measurement 20
  • Measurement 22
  • Measurement 720
  • Measurement 72
  • Measurement 16
  • Measurement 24
  • Measurement 90
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 32
  • Measurement 20
  • Measurement 20
  • Measurement 16
  • Measurement 720
  • 4040

Implementation

Banner implementation support for each platform is indicated below.

Flutter Material Component

Status: Code Available