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.
- 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.
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)
One-line text with one action or two actions
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
Two-line text/three-line text with two actions
A. Two-line text with two actions
B. Icon or image and two-line text with two actions
C. Three-line text with two actions (only for mobile)
Banners typically appear when a screen loads content and it will remain on screen until dismissed by the user.
Scrolling (without taking action)
One-Line Text with One Action
Two-Line Text with Two Actions
Two-Line Text with Two Actions (with icon/image)