UI Components Basic Components Banners

Intro

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

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 (one to three lines for mobile, one to two lines for tablet)

C. Buttons (text button only, the maximum is two actions)

Banner anatomy
Banner anatomy

Behavior and Interaction

Banners typically appear when a screen loads content and it will remain on screen until dismissed by the user.

Banner appearing
Banner appearing
Banner behavior while scrolling (without taking action)
Banner behavior while scrolling (without taking action)
Dismissing banners
Dismissing banners

Variations

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

Banner examples: one-line text
Banner examples: one-line text

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)

Banner examples: two/three-line text
Banner examples: two/three-line text

Specifications

One-line text with one action

One-line text with one action: mobile (top) and tablet (bottom)
One-line text with one action: mobile (top) and tablet (bottom)
Specification for one-line text with one action: mobile (top) and tablet (bottom)
Specification for one-line text with one action: mobile (top) and tablet (bottom)

Two-line text with two actions

Two-line text with two actions: mobile (top) and tablet (bottom)
Two-line text with two actions: mobile (top) and tablet (bottom)
Specification for two-line text with two actions: mobile (top) and tablet (bottom)
Specification for two-line text with two actions: mobile (top) and tablet (bottom)

One-line text with one action and icon/image

One-line text with two actions and icon/image: mobile (top) and tablet (bottom)
One-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Specification for one-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Specification for one-line text with two actions and icon/image: mobile (top) and tablet (bottom)

Two-line text with two actions and icon/image

Two-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Two-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Specification for two-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Specification for two-line text with two actions and icon/image: mobile (top) and tablet (bottom)

Resources

Development: Banner Messages

SAP Fiori for iOS: Banners