Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)
Components Snackbars and Toasts
This document is a preview.

Snackbars and Toasts

Snackbars provide lightweight feedback about an operation in a small popup at the base of the screen on mobile and at the lower left on desktop. They are above all over elements on screen, including the floating action button.

They automatically disappear after a timeout or after user interaction elsewhere on the screen, whichever comes first. Snackbars can be swiped off screen. They do not block input on the screens they appear on and cannot receive input focus. Show only one snackbar on screen at a time.

Android also provides a capsule-shaped toast, primarily used for system messaging. Toasts are similar to snackbars but do not contain actions and cannot be swiped off screen.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Very short text strings

Snackbars should generally only be tall enough to accommodate one string, and the string should be directly related to the operation performed. They cannot contain icons or action icons. Actions are in the form of text.

Do.
Don't.

Transient

For usability, snackbars should not contain the only way to access a core use case. They should not be persistent and stack, as they are above other elements on screen.

Do.
Don't.

0-1 actions, not dismiss or cancel

If an action is present, comply with dialog spacing and affordance rules. For two or more actions, use a dialog, not a snackbar, even when one of the actions is a dismiss action. If the action(s) described in the snackbar are important enough to block usage of the screen, it should be a dialog.

Do.
Don't.

DonĂ¢€™t block the floating action button

Move your floating action button vertically to accommodate the snackbar height.

Do.
Don't.

Specs Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Mobile snackbar

  • Single-line snackbar height: 48 dp
  • Multi-line snackbar height: 80 dp
  • Text: Roboto Regular 14 sp
  • Action button: Roboto Medium 14 sp, all-caps text
  • Default background fill: #323232 100%

Tablet/Desktop snackbar

  • Single-line snackbar height: 48 dp tall
  • Minimum width: 288 dp
  • Maximum width: 568 dp
  • 2 dp rounded corner
  • Text: Roboto Regular 14 sp
  • Action button: Roboto Medium 14 sp, all-caps text
  • Default background fill: #323232 100%

Android toast

Developers can create custom toasts and/or custom screen placements for them. If making a custom toast, you are strongly encouraged to adhere to the snackbar style provided above.