Snackbars

Snackbars provide brief messages about app processes at the bottom of the screen.

Developer documentation

Platform

Status

Android

Available

iOS

Available

Web

Available

Flutter

Available


Usage

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Frequency

Only one snackbar may be displayed at a time.

Actions

A snackbar can contain a single action. Because they disappear automatically, the action shouldn’t be “Dismiss” or “Cancel.”

Principles

Snackbars are informational, temporary, and timely.

Read More

Informational

Snackbars provide updates on an app’s processes.

Temporary

Snackbars appear temporarily, and disappear on their own without requiring user input to be dismissed.

Contextual

Snackbars are placed in the most suitable area of the UI.

When to use

Snackbars communicate messages that are minimally interruptive and don’t require user action. Component Priority User action Snackbar Low priority Optional: Snackbars disappear automatically Banner Prominent,...

Read More

Snackbars communicate messages that are minimally interruptive and don’t require user action.

Component

Priority

User action

Snackbar

Low priority

Optional: Snackbars disappear automatically

Banner

Prominent, medium priority

Optional: Banners remain until dismissed by the user, or if the state that caused the banner is resolved

Dialog

Highest priority

Required: Dialogs block app usage until the user takes a dialog action or exits the dialog (if available)


Anatomy

Diagram of the 3 parts of snackbar including Text label, Container, and Action

1. Text label

2. Container

3. Action (optional)

Text label

Snackbars contain a text label that directly relates to the process being performed. On mobile, the text label can contain up to two lines of...

Read More

Snackbars contain a text label that directly relates to the process being performed. On mobile, the text label can contain up to two lines of text.

Single line text label on mobile Snackbar. Text label is Saved in “Wedding” album

Text labels are short, clear updates on processes that have been performed.

Two line text label on mobile. Snackbar text label is This item already has the label “travel”. You can add a new label.

Do.

On mobile, use up to two lines of text to communicate the snackbar message.

Single line text label on desktop. Snackbar text label is This item already has the label “travel”. You can add a new label.

Do.

In wide UIs like desktop and tablet, snackbars should have only a single line of text.

Single line text label on mobile that includes save icon before the Snackbar text label

Don’t.

Don’t place icons in snackbars. If your message needs an icon, consider using an alert.

Container

Snackbars are displayed in rectangular containers with a grey background. Containers should be completely opaque, so that text labels remain legible.

Read More

Snackbars are displayed in rectangular containers with a grey background. Containers should be completely opaque, so that text labels remain legible.

Snackbar on mobile with dark grey container, white text, and purple action text

Do.

Snackbar containers use a solid background color with a shadow to stand out against content.

Longer snackbar on desktop

Do.

In wide layouts, extend the container width to accommodate longer text labels.

Snackbar with non-opaque container with text still legible

Caution.

An app can apply slight transparency to the container background, as long as text remains clearly legible.

Snackbar with circular container

Don’t.

Avoid significantly altering the shape of a snackbar container.

Snackbar without shadow

Don’t.

Avoid displaying a snackbar container without elevation.

Action

Snackbars can display a single text button that lets users take action on a process performed by the app. Snackbars shouldn’t be the only way...

Read More

Snackbars can display a single text button that lets users take action on a process performed by the app. Snackbars shouldn’t be the only way to access a core use case, to make an app usable.

Single line snackbar with white text label on left and purple action text on right. Text is RETRY

To distinguish the action from the text label, text buttons should display colored text.

Snackbar with white text label and white action text. The action text is RETRY

Don’t.

The text label shouldn’t share the same color as the text button.

Snackbar with white text label and white action text on a saturated purple background. The action text is  is RETRY

Don’t.

Don’t use a filled or elevated button in a snackbar, as it draws too much attention.

Snackbar with 2-line text label and purple action text in the bottom right corner

Do.

If an action is long, it can be displayed on a third line.

Snackbar with purple action text. Text is UNDO

Do.

To allow users to amend choices, display an "Undo" action.

Snackbar with purple action text. Text is DISMISS

Caution.

A dismiss action is unnecessary, as snackbar disappears on their own by default.


Behavior

Appearing and disappearing

Snackbars appear without warning, and don't require user interaction. They automatically disappear from the screen after a minimum of four seconds, and a maximum of...

Read More

Snackbars appear without warning, and don't require user interaction. They automatically disappear from the screen after a minimum of four seconds, and a maximum of ten seconds.

Consecutive snackbars

When multiple snackbar updates are necessary, they should appear one at a time.

Read More

When multiple snackbar updates are necessary, they should appear one at a time.

Consecutive snackbars should appear above persistent bottom navigation.

Don’t.

Avoid stacking snackbars on top of one another.

Don’t.

Don’t animate other components along with snackbar animations, such as the floating action button.


Placement

At the bottom of the UI

Snackbars should be placed at the bottom of a UI, in front of app content. Avoid placing a snackbar in front of frequently used touch targets or navigation.

Snackbar at the bottom of a mobile recipe UI. Snackbar text label is “Recipe saved to your Favorites”

Place a snackbar in front of the content.

A mobile recipe UI with a snackbar that is blocking touch targets and navigational components. The text label is “Recipe saved to your Favorites”

Don’t.

Avoid placing snackbars in front of navigation components.

Snackbars can span the entire width of the screen only when a UI does not use persistent navigation components like app bars or bottom navigation bars.
Snackbars that span the entire width of a UI can push only FABs up when they appear.


A mobile recipe UI with a snackbar that spans the entire width of the UI without blocking any touch targets and navigational components

Caution.

Snackbars can span the entire width of a UI. However, they should not appear in front of navigation or other important UI elements like floating action buttons.

Snackbars and floating action buttons (FABs)

Snackbars should appear above FABs.

Read More

Snackbars should appear above FABs.

A mobile recipe UI with a snackbar that is above a purple FAB

Snackbar above a FAB

A mobile photo UI with a snackbar that covers FAB and blocks touch target

>

Don’t.

Don’t place a snackbar in front of a FAB.

A mobile photo UI. The  snackbar has a touch target that is being blocked by a FAB

Don’t.

Don’t place a snackbar behind a FAB.

Snackbars and persistent footer elements

Snackbars should appear directly above persistent footer elements.

Read More

Snackbars should appear directly above persistent footer elements.

A mobile photo UI with a snackbar that is directly above footer elements. Text label says “Photos saved to your Favorites”

Snackbar above persistent footer elements

A mobile maps UI with a snackbar that is on top of UI. Text label says “Address copied to your Clipboard”

Do.

Place snackbars in front of medium extended sheets.

A mobile recipe UI with the footer navigational elements above the snackbar. The text label says, “recipe saved to your favorites”

Don’t.

Avoid pushing bottom persistent elements up when snackbars appear.

Snackbars in wide layouts

In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.

Read More

In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.

Desktop photo UI with images of cats and dogs. The snackbar is left-aligned and the text label is “8 photos have been added to your album “Pets”
Desktop photo UI with images of cats and dogs. The snackbar is center-aligned and the text label is “8 photos have been added to your album “Pets”
Desktop photo UI with images of cats and dogs. The snackbar is left aligned but flushed to the edge of the screen.

Don’t.

Avoid placing snackbars flushed to one edge of the layout.

Desktop photo UI with images of pets. There are two snackbars that appear side by side.

Don’t.

Avoid placing consecutive snackbars side by side or next to one another.


Specs

  • Measurement 48
  • Measurement C
  • Measurement 16
  • Measurement 344
  • Measurement 16

Snackbar dimensions and font size

  • Measurement C
  • Measurement 48
  • Measurement 344
  • Measurement 8
  • Measurement 8
  • Measurement 16
  • Measurement 6
  • Measurement 6
  • Measurement 8
  • Measurement 8
  • Measurement 16
  • Measurement 30
  • Measurement 68
  • Measurement 344
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 8
  • Measurement 30
  • Measurement 8
  • Measurement 18