Skip to main content

Components

Snackbar

Snackbar displays informative text

banner-Snackbar

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

guideline snackbar
  1. Text Label : Contain a text label that directly relates to the process being performed.
  2. 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.

Alt text

Do

Use different copy to provide multiple information to users

Alt text

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