Snackbar

Snackbar displays informative text

Anatomy

Snackbar components can be used to inform users of the results of the process executed by an app. The snackbar type exposed at the bottom is used by default

Text Label : Contain a text label that directly relates to the process being performed.
Button (Optional) : To provide an action for user to take an action if needed

Usage

Snackbar informs users of a process that an app has performed or will perform. Do not place core app functionality into a Snackbar. Snackbars appear above all other elements on screen and only one can be displayed at a time.

Common places buttons appear : Bottom of the screen, top of the screen (Rarely).

When to use

To display temporary short messages.
To react to user input (let users know something is happening).

When not to use

If the message should stay on the screen
When you want to include an action
When an action is necessary before continuing

Accessibility

A modal displays important information to a user without requiring them to navigate to a new page. Keyboard and mouse users shouldn’t be able to interact with the rest of the page outside of an open modal. Set initial focus on the first focusable element in the modal. Keyboard users should be able to leave the modal by pressing Esc and focus should return to the element that invoked the modal.

Use different copy to provide multiple information to users

Don't

Use multiple snackbar at same time

Content

When creating Snackbar :

Snackbars should be located 24px from the bottom-left corner of the screen.
Only one snackbar should be visible at a time
If multiple snackbars need to appear, have them appear sequentially, replacing the previous snackbar
Avoid using snackbars for critical information It may be difficult for users with low dexterity or vision to access it.
Avoid including user-inputted text