iOS
Android
Snackbar
Last updated Sep 02, 2019

A Snackbar is a temporary message that does not require user confirmation. It is useful to communicate feedback for user actions, and in keeping the user informed of system status.

Usage

When to use Snackbar

When Not to use Snackbar

Visual design

Single line Snackbar

Every Snackbar has a message and an optional action. We dynamically choose if the message spans one or two lines, based on its length. Since we want messages to be concise, the single line spec should be most common.

Two line Snackbar

Here are the variations available for longer messages:

  • If the message cannot fit in 1 line with a 16dp padding between message and text, we use two lines with short action variation.
  • If even after two lines we cannot maintain a 16dp padding between message and text, we send the button on its own line.

Layout

The height of the Snackbar is independent of its container—it only depends on the Snackbar contents. The width is always relative to the screen size.