Banners show 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 may choose to use it for communicating internet connectivity, errors, synchronization statuses, or in-app notifications.
Banner on mobile (left) and on tablet (right)
- Banners must remain on screen until dismissed by the user.
- Only show one banner at a time.
- Only use a text button for actions.
- Optionally, you can add icons or images.
A. Icon or Image (Optional)
The text can be one to three lines on mobile and one or two lines on tablet.
A banner can provide up to two actions, which can be displayed as text button only.
Behavior and Interaction
Banners typically appear when a screen loads content and remain on screen until dismissed by the user.
Banner appearing and dismissing
Banner behavior with scrolling content
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
D. Error state one-line text
E. Error state one-line text with action
A. Two-line text with two actions
B. Icon or image and two-line text with two actions
C. Error state two-line text with action