Snackbar

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.

Default

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.

Anatomy

Color contrast of action label and background is WCAG AA compliant

Configurations

Guidelines

• 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

✅ DO – Display multiple snackbars one at a time

Placement

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.

❌ Don’t place snackbars flush to the edge of the layout or screen

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