Snackbar

v2.0

Snackbars are temporary messages that provide immediate feedback about a user action. They communicate the success or failure of an action, with an optional button to revert a decision, correct a failure, or dismiss.

CSS
Marko
React

Considerations

Temporary

Snackbars appear and disappear after a set amount of time.

Brief

Snackbars are short and concise.

Responsive

Snackbars provide feedback about the processing of a user action.

Anatomy

Container
Body
Action

Properties

Body

The body of the snackbar is required and informs that something occurred. The message should be as concise as possible.

Action

Snackbars can contain a single action. The label should be a verb, contain no more than two words, and relate directly to the action that was taken.

For default messages, this can be an undo, a link to a relevant list, or an explicit dismiss action. For error messages, the action can attempt to resubmit data or navigate the user somewhere to address the issue.

Critical

Snackbars use an attention icon to the left of the message when an issue occurs.

Because snackbars are transient, it is advisable to use a different pattern like dialog for high-priority issues.

Behavior

Text overflow

Snackbars with longer messages will wrap and the action will move below the text. This layout is also preferred if the action label is longer. Aim for no more than two lines of text for the body.

Width

Snackbars have a maximum width of 448px. They can span full width minus insets on small screens up to the maximum width.

Placement

Snackbars appear bottom center on all screen sizes. They can span full width minus insets on small screens but adhere to a maximum width at larger screen sizes.

Snackbars animate upward from the bottom of the screen and downward off screen when dismissing.

Offset

Snackbars are offset 16px above persistent elements pinned to the bottom of the screen. If there are no persistent elements then the snackbar should be offset to clear any navigation hardware. They are inset 16px when fullwidth on smaller screens.

FAB interaction

While some platforms default to the snackbar above the floating action button (FAB), the preferred placement is below.

Dismiss

Snackbars can be dismissed by the action button, timing out, or via a downward swipe gesture.

Timeout

Snackbars appear from the bottom of the screen with a default timeout of 6 seconds (6000ms). The timing begins when the component loads into view and the message will dismiss automatically after the timeout if the user continues interacting with screen content.

Users can dismiss a message anytime via a downward swipe gesture.

Screen sizes

Small

Snackbars appear at the bottom center of the screen on small screens.

Medium and large

Snackbars are aligned bottom-center on larger screens.

Best practices

Consecutive messages

Do replace existing snackbar messages with newer ones.

Don’t allow multiple snackbars to appear at once. Snackbars do not stack.

Placement

Do keep snackbars centered along the bottom of the screen.

Don’t customize the placement of snackbars.

Content

Do keep snackbar messages as short as possible, with no more than two lines in English, and use generic language for items.

Avoid being overly verbose within snackbar messages. Being overly-specific can negatively affect localization and scalability.

Snackbar vs. dialog

Do use snackbars for messages or alerts that don’t need to completely interrupt an experience.

Don’t use snackbars for high-impact decisions that require user attention or a response.

Frequency

Do use snackbars for targeted actions such as updating payment options, making changes to the cart, and reporting an item.

Don’t use snackbars for quick, repetitive actions such as watching multiple items in a grid of options. Too many snackbars after each other are disruptive to the experience.