Skip to content
search icon
clear
Component Status

Notification snackbar

Snackbars provide brief temporary non-interrupting notifications at the bottom of the screen.

Guidelines

Snackbars provide an update on a process that has or will be performed. Snackbars deliver low priority information---while Banners deliver medium priority and Dialogs deliver high priority information. Snackbars appear centered at the bottom of the screen and disappear without user interaction. On wider screens they are left-aligned. Snackbars appear on-screen between 5-10 seconds before dismissing themselves, so keep text short.

Snackbars can have one action. This action should not be "Close " or "Dismiss" since snackbars disappear automatically. Actions such as "Undo" or "Retry" are acceptable. Snackbars can wrap up to two lines of text on smaller screens.

Don't

  • Do not stack snackbars.
  • Do not show more than one snackbar at a time.
  • Do not add links to the text.
  • Do not add more than one action.
  • Do not add icons to snackbars.
  • Do not hide core functionality or navigation in snackbar actions.
FigmaExternal linkFigma design of snackbar

Demo

✏️ Edit this page on GitHub