Updated: June 10, 2019

Banners

Intro

Banners maybe used to provide feedback to the user the result of an action that the user triggered or a message from the system. The most commonly usage of banners is to communicate errors, offline and synchronization status. Banners may also be used for in-app notifications.

The message on the banner should be short and concise communicating the intent and if needed, further actions to be taken.

Behavior & Interaction

Placement

When a header is available, the banner slides down from below the header. When there is no header, the banner slides down from below the navigation bar. The banners covers the content below.

Auto Dismiss vs Persistent

You can choose the behavior of the banner depending on the nature and message of the banner. If the banner is persistent, provide a way for the user to close or dismiss it.

Progress Bar

When using a sync banner, display a progress bar to give a visual indication of the length of time or how much synchronization remains.

Actions in Banners

If the banner has an action, ensure that it is clearly communicated to the user. Use global tint colors which communicate interactivity.

Read Error Handling & Offline for more information.