A banner shows a short and concise message that displays at the top of the screen. It allows the user to take action or ignore it at any time. Apps could choose to use it for communicating internet connectivity, errors, synchronization statuses, and in-app notifications.

Usage

• Banners must remain on screen until dismissed by the user.
• Only one banner may be shown at a time.
• The maximum number of actions on the banner is two.
• Actions can only be styled as a text button.
• On mobile, the three-line text is the maximum.
• On tablet, the two-line text is the maximum.
• Usage of icon or image is optional.

Structure

A. Icon or image (optional)

B. Text (one to three lines for mobile, one to two lines for tablet)

C. Buttons (text button only, the maximum is two actions)

Types

Behavior

Banners typically appear when a screen loads content and it will remain on screen until dismissed by the user.

Appearing

Scrolling (without taking action)

Dismissing Banners

Specs

One-Line Text with One Action

Two-Line Text with Two Actions

Two-Line Text with Two Actions (with icon/image)