Updated: August 23, 2024

Banners

FUIBannerMessageView, FUIOfflineBannerMessageView, FUIProgressBannerMessageView

Intro

A banner is a notification that appears on the screen to inform the user about a certain event or a change in system status. It contains a short notification text and optionally a button to allow the user to take a recommended action

Banner examples: an error, an offline, and a syncing banner
Banner examples: an error, an offline, and a syncing banner

Usage

Use a banner when the user needs to be informed about a certain event or a change in system status. Keep the text of the notification message short and concise to avoid blocking other important content on the screen. 

Do

  • Keep the text short and concise.
  • Ensure that the user can still interact with the device.
Don't
  • Don’t allow the text to be longer than two lines.
  • Don’t let the banner text cover up other important information on the screen. 
Do keep text short and concise; Don't allow text to be longer than two lines
Do keep text short and concise; Don't allow text to be longer than two lines

Anatomy

A. Banner Text (Mandatory)

Contains a clear message and, optionally, a recommended action for the user.

B. Icon (Optional)

Indicates sync in progress status.

C. Dismiss Button (Optional)

Allows the user to dismiss the banner.

D. Action Button (Optional)

Allows the user to take a recommended action.

Developer Hint
Additional customization work may be required for the action button.

E. Indicator Track (Optional)

Appears above the banner in a semantic color to indicate a progress or the banner type.

Banner anatomy
Banner anatomy

Behavior and Interaction

Touch Targets

The banner contains three possible touch targets: the bar, a dismiss button and an action button.

Possible touch targets on a banner
Possible touch targets on a banner

Banner Position

Overlapping Position

If there is a navigation bar or header component, the banner slides down from under the navigation bar or header component. It disappears by sliding back up the same way. By default, the banner partially covers the content below it.

An overlapping banner that appears below a navigation bar (left) and an object header (right)
An overlapping banner that appears below a navigation bar (left) and an object header (right)

Embedded Position

A banner can also appear between elements, making sure it doesn’t cover any content. In this position, it pushes the content below it down.

An embedded banner below a navigation bar (left) and an object header (right)
An embedded banner below a navigation bar (left) and an object header (right)

Scrolling

The banner sticks to the navigation bar when the user scrolls up or down. If there is a header component between the navigation bar and the banner, the banner sticks to the navigation once the user scrolls up while the header component disappears.

The screens from the left to right show how the banner sticks to the navigation bar
The screens from the left to right show how the banner sticks to the navigation bar

Content Underneath a Banner

By default, the banner slides down without impacting the content scroll position. If the user scrolls to the top, content that is hidden underneath might show up.

Example where content is hidden underneath a banner
Example where content is hidden underneath a banner
Information

It is also technically feasible to have multiple banners. In this scenario, the second (more recent) banner would be positioned above the first one, overlaying the content of the page. However, users are still be able to access the underlying content by scrolling downwards.

Adaptive Design

The banner follows the global layout margin of the iOS size classes (compact and regular) and therefore adapts to any iPhone or iPad device and its containers.

Banner in compact mode (left) and in regular mode (right).
Banner in compact mode (left) and in regular mode (right).

Variations

Progress Banner

A progress banner is used to indicate a loading process or an in-progress state. Users can be enabled to pause or stop the progress by tapping on the bar.

Example of a progress banner
Example of a progress banner

Persistence

A banner is, by default, persistent and won’t disappear unless the system status or condition described in the banner text changes. If you want a banner to disappear after a certain time, you can set a timer or provide an option for the user to dismiss it.

Persistent banner (left) and dismissible banner (right)
Persistent banner (left) and dismissible banner (right)

Resources

Development: FUIBannerMessageView, FUIOfflineBannerMessageView, FUIProgressBannerMessageView

SAP Fiori for Android: Banners

Related Components/Patterns: Feedback, Error Handling, Offline