Banner examples: mobile (left) and tablet (right)
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.
- 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.
Behavior and Interaction
Banners typically appear when a screen loads content and it will remain on screen until dismissed by the user.
Banner behavior while scrolling (without taking action)
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