A non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. Snackbars communicate messages that are minimally interruptive.


Conveys general confirmation or actions that are not critical.

With action

Use when the user has the chance to act on the message. For example, to undo a change or retry an action. Only include an action if the same action is available elsewhere on the page.




  • Snackbars shouldn’t interrupt the user experience, and they don’t require user input to disappear

  • All snackbars are dismissible

  • Only one snackbar may be displayed at a time. When multiple snackbar updates are necessary, they should appear one at a time as seen in the video below.

  • Snackbars without action persist for 5 seconds, with action 10 seconds

  • Snackbars won't disappear while hovering on them


Bottom center of the UI, in front of the main content.

Snackbars can be pushed up to avoid overlapping with other important UI elements such as navigation and floating action buttons.

Content guidelines

  • Short and affirmative

  • Written in the pattern: noun + verb

  • Action label is short, preferably 1 verb

  • Don't include actions such as 'Cancel' or 'Dismiss'. The [X] action is already available in the component

Last updated