UI Components Basic Components Banners

Intro

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)
Banner on mobile (left) and on tablet (right)

Usage

Do
  • 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.
Don't
  • Don’t place more than two actions on a banner.
  • Don’t use more than three lines of text on mobile.
  • Don’t use more than two lines of text on tablet.

Anatomy

A. Icon or Image (Optional)

B. Text

The text can be one to three lines on mobile and one or two lines on tablet.

C. Buttons

A banner can provide up to two actions, which can be displayed as text button only.

Banner anatomy
Banner anatomy

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 appearing and dismissing
Banner behavior with scrolling content
Banner behavior with scrolling content

Variations

One-Line Text

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

Banner with one-line text
Banner with one-line text

Two-Line Text

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

Banner with two-line text
Banner with two-line text

Three-Line Text (Only for Mobile)

Three-line text with two actions (only for mobile)

Banner with three-line text (mobile only)
Banner with three-line text (mobile only)

Resources

Development: Banner Messages

SAP Fiori for iOS: Banners