Banners

A banner displays a prominent message and related optional actions.

Android Not available Web Flutter iOS

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

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

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.

A banner appears above content and below a top app bar.
Don'tOnly 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.

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

DoBanners may have one or two low-emphasis text buttons.
CautionAvoid 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.
CautionBanners 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'tDon’t include links in a banner message. All available actions should be represented as buttons.
Don'tDon’t combine buttons with different emphasis levels, which could appear to promote one action over another.
CautionDon’t stack buttons unless there isn’t sufficient room to display them side by side.
Don'tDon’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.

Banners can supplement their message using a supporting illustration.

DoIcons can help communicate a banner’s message.
Don'tAn 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.

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.
Banner and a top bar
Don'tThe surface containing a banner should be clearly distinguished from the top app bar surface.
Don'tBanners 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.

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

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

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.

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.

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.
Don'tAvoid stacking multiple banners.

Banners and pannable content

Banners remain on screen when scrolling pannable content.

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

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

Banners must remain on screen until dismissed by the user.

Banners can be dismissed by the user.
DoBanners 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 app that uses Material...

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

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

  • 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

  • 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
 
No Android implementation guidance available

Using banners

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.

Installing banners

Styles

JavaScript instantiation

See Importing the JS component for more information on how to import JavaScript.

Banners

Variants

Centered

By default, banners are positioned as leading.

They can optionally be displayed centered by adding the mdc-banner--centered modifier class to the root element:

Alternatively, you can call the position-centered mixin from Sass:

Fixed Banner

When used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the mdc-banner__fixed wrapper element around the content element:

Images can help communicate a banner’s message.

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

Mobile Stacked

On mobile view, banners with long text should have their action(s) be positioned below the text instead of alongside it. This can be accomplished by adding the mdc-banner--mobile-stacked modifier class to the root element:

Alternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the layout-stacked mixin from Sass:

API

Sass mixins

Access to theme mixins require importing the banner's theme style module.

MixinDescription
fill-color($color)Sets the fill color of the banner.
text-color($color)Sets the color of the banners's text.
divider-color($color)Sets the color of the banner's divider.
min-width($min-width, $mobile-breakpoint)Sets the min-width of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.
max-width($max-width)Sets the max-width of the banner content.
position-centered()Sets the banner content to centered instead of leading.
z-index($z-index)Sets the z-index of the banner.

MDCBanner events

Event nameevent.detailDescription
MDCBanner:closingMDCBannerCloseEventDetailIndicates when the banner begins its closing animation.
MDCBanner:closedMDCBannerCloseEventDetailIndicates when the banner finishes its closing animation.
MDCBanner:opening{}Indicates when the banner begins its opening animation.
MDCBanner:opened{}Indicates when the banner finishes its opening animation.

MDCBanner Methods

Method SignatureDescription
open() => voidOpens the banner.
close(reason: CloseReason) => voidCloses the banner, with the specified action indicating why it was closed.
isOpen() => booleanReturns whether the banner is open.
getText() => stringGets the text of the banner.
setText(text: string) => voidSets the text of the banner.
getPrimaryActionText() => stringGets the banner's primary action text.
setPrimaryActionText(actionButtonText: string) => voidSets the banner's primary action text.
getSecondaryActionText() => string | nullGets the banner's secondary action text. Returns null if the banner has no secondary action.
setSecondaryActionText(actionButtonText: string) => voidSets the banner's secondary action text.
layout() => voidRecalculates layout. With height being calculated dynamically recommended to call on window resize events.

Usage Within Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a banner for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

See MDCBannerAdapter and MDCBannerFoundation for up-to-date code documentation of banner foundation APIs.

No Web implementation guidance available

Using banners

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.

Import banners

Before you can use banners, you need to import the Material Components package for Flutter:

You need to be using a MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making banners accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Anatomy and key properties

Banners anatomy diagram

Banners consist of the following:

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

Supporting illustration

 Property
Illustrationleading

Container

 Property
ColorbackgroundColor

Text

 Property
Text labelcontent
Colorstyle on content when using a Text
Typographystyle on content when using a Text

Buttons

 Property
Buttonsactions

Banners example

MaterialBanner

The following example shows a banner being used with an icon and two actions.

"Regular banner example for Flutter."

Theming banners

MaterialBanner

Banners support Material Theming and can be customized in terms of color and typography.

The following example shows a banner with the Material Shrine Theme.

"Banner with Shrine theming."

No Flutter implementation guidance available

Using banners

Installing

Add the following to your Podfile:

Then, run the following command:

To use the MDCBannerView in your code, import the MaterialBanner umbrella header (Objective-C) or MaterialComponents module (Swift).

Swift

Objective-C

Making banners accessible

The system will set accessibilityLabel for the elements in the banner that contain text. As always, you are free to change these labels if it leads to a better VoiceOver expoerience. Consider setting an accessibilityLabel on the image view.

The only non-standard accessibiility API exposed on MDCBannerView is mdc_adjustsFontForContentSizeCategory, which is an alternative to adjustsFontForContentSizeCategory that is specific to the MDC iOS library. Eventually we will deprecate and delete mdc_adjustsFontForContentSizeCategory.

Types

On iOS there is just one type of banner.

Anatomy and key properties

Banner anatomy diagram showing an image thumbnail, example text, and two text buttons

Banners consist of the following:

  1. Image view (optional)
  2. Container
  3. Text
  4. Buttons

Image view attributes

 AttributeRelated method(s)Default value
Image viewimageView-[MDCBannerView imageView]N/A
ImageimageView.image-[UIImageview setImage:]
-[UIImageview image]
N/A

Container attributes

 AttributeRelated method(s)Default value
ColorbackgroundColor-[MDCBannerView setBackgroundColor:]
-[MDCBannerView backgroundColor]
White

Text attributes

 AttributeRelated method(s)Default value
TexttextView.text-[UITextView setText:]
-[UITextView text]
nil
ColortextView.text-[UITextView setTextColor:]
-[UITextView textColor]
Black
TypographytextView.font-[UITextView setFont:]
-[UITextView font]
Body 2 font

Button attributes

 AttributeRelated method(s)Default value
Leading buttonleadingButton-[MDCBannerVieiw leadingButton]N/A
Trailing buttontrailingButton-[MDCBannerVieiw trailingButton]N/A

Theming

MDCBannerView supports Material Theming using a container scheme.

Here is an example of a Banner with the Shrine theme applied to it.

Banner with dummy text description and text button labeled "dismiss"

To theme your banner, first add the following to your Podfile:

Then run the installer:

From there, import the relevant target or file and call the theming method.

Swift

Objective-C

No iOS implementation guidance available

Up next