A snackbar is a brief, unobtrusive message that appears at the bottom of the interface to inform users about a process or event, often with an optional action.

Anatomy

• A. Icon: Leading icon to indicate the type of message (success, error, info, warning).

• B. Message: Display a concise, single-line text describing the event or update.

• C. Action: A high-emphasis button for optional user interaction

• D. Container: Fixed-position container with rounded corners, & shadow which contains the snackbar.

Types

Position

Snackbar must be positioned 16px above the bottom edge of the screen, or 16px above the bottom navigation bar when it is present.

Dismissibility

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. Users can also dismiss a snackbar instantly if that action is presented.

Actions

Snackbars can display a single tertiary text button that lets users take action on a process performed by the app.

Frequency

Only one snackbar may be displayed at a time. When multiple snackbar updates are necessary, they should appear one at a time.

Content

• Snackbars contain a text label that directly relates to the process being performed.

• The text label can contain up to two lines of text.

• Content should be short and clear updates on processes that have been performed.