Do

Use a banner to inform users about a certain event or a change in system status within two lines of text.

Don't

Don’t use a banner to show component level messages.

A. Banner Text

The banner text contains a clear message and, optionally, a recommended action for the user.

B. Icon (Optional)

The icon indicates sync in progress status.

C. “Close” Button (Optional)

The “Close” button allows users to dismiss the banner.

D. Action Button (Optional)

The action button enables users to take a recommended action.

E. Indicator Track (Optional)

The indicator track appears above the banner in a semantic color to indicate a progress or the banner type.

Banner anatomy

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)

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)

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

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

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.

Progress banner

By default, a banner is persistent and remains visible until the system status or condition mentioned in the banner text changes. If you prefer a banner to disappear after a set time, you can configure a timer or provide an option for users to dismiss it.

Persistent banner (left) and dismissible banner (right)

An error state banner is used to notify a user when the state of a workflow is disrupted and may require attention. The user can dismiss the error banner by tapping on the “Close” button.

Error state banner on compact (left) and regular (right)

An offline state banner is best used when the app goes offline. The banner can auto dismiss after a few seconds or be persistent.

Offline state banner

A sync banner allows users to continue working after triggering the sync. Ensure that users have an option to cancel the sync or close the banner. A spinning sync icon indicates that the sync is in progress. Once the sync is completed, inform users that the sync was successful by replacing the text with “Sync completed”.

Sync banner

When a screen contains multiple messages, the banner can display an overview of the type and number of messages, along with an action link to open a multi-message handling detail view in a bottom sheet (compact) or a popover (regular).

Multi-message handling detail view on compact screen (left) and regular screen (right)