Intro

A snackbar provides a brief message about about the performance of a process at the bottom of the screen.

Snackbar
Snackbar

Usage

Snackbar provides updates of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen and disappears on its own without requiring the user’s dismissal.

Do
  • Create text labels that are short and clear.
  • Distinguish the action from the text label.
  • Use the third line to display actions with longer text.
  • Use different colors for the text label and the text button.
Don't
  • Don’t use icons in snackbar.
  • Don’t add more than one text button.
  • Don’t use a contained button
  • Avoid stacking snackbars on top of one another.

Variations

Snackbar with Text Label

The message on the snackbar directly relates to the process being performed (for example, files have been moved, item added to cart). The text label can have one or two lines of text.

Snackbar containing a one-line message (top) and two lines message (bottom)
Snackbar containing a one-line message (top) and two lines message (bottom)

Snackbar with Action

Snackbars can display a single text button that allows users to take action on a process performed by the app. To distinguish the action from the text label, the action text should be tinted.

Snackbar with button
Snackbar with button

Behavior & Interaction

A snackbar appears at the bottom of the screen and does not require the user’s dismissal. It appears momentarily and dismisses itself after 4-10 seconds.

Consecutive Snackbars

When multiple app updates are necessary, snackbars should appear one at a time.

User interaction with snackbar
User interaction with snackbar

Specifications

Placement

Snackbar placement
Snackbar placement
Specifications of snackbar placement
Specifications of snackbar placement


One Line of Text

Snackbar with one line of text
Snackbar with one line of text
Specifications of snackbar with one line of text
Specifications of snackbar with one line of text


One Line of Text with Action

Snackbar with one line of text and action
Snackbar with one line of text and action
Specifications of snackbar with one line of text and action
Specifications of snackbar with one line of text and action


Two Lines of Text

Snackbar with two lines of text
Snackbar with two lines of text
Specifications of snackbar with two lines of text
Specifications of snackbar with two lines of text


Two Lines of Text with action

Snackbar with two lines of text and action
Snackbar with two lines of text and action
Specifications of snackbar with two lines of text and action
Specifications of snackbar with two lines of text and action


Two Lines of Text with Long Action Text

Snackbar with two lines of text and a long action text
Snackbar with two lines of text and a long action text
Specifications of snackbar with two lines of text and a long action text
Specifications of snackbar with two lines of text and a long action text

Resources

SAP Fiori for iOS: Toast Message

Material Design Guidelines: Snackbars