iOS
Android
Banners
Last updated Feb 6, 2020

A banner is an alert or message that is displayed to the user at the top of the screen. It is persistent, and should ideally have actions through which the user can dismiss them.

Usage

Visual design

A banner can consist of a message (mandatory), actions (recommended), and an icon (optional). The banner should dynamically adapt to use 1 or 2 lines based available width.

tablet

Banners on a tablet follow the same layout rules as phone, just stretched to fill the available width. If there are two panes, the banner should span both panes.

Interactions

Accessibility

Talkback

  • The icon/image does not need to be read out. Consider it null.
  • The message needs to be read out. Ideally prefix "Banner message."
  • Actions should be follow regular button talkback rules.

Large Text