Snackbars
Snackbars provide brief messages about a process, and they should appear at the bottom of the screen.
When to use
Snackbars are less priority and inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
They should contain a maximum of two lines of text directly related to the operation performed.
Snackbars may contain a text action, a button action but no icons.
Snackbars must contain a maximum of two lines of text.
Snackbars must not use additional action icons besides the close icon.
Types
1. Single-line
Displays a brief message in a single line.
2. Two-line
Contains a message that spans two lines, providing more context or details.
3. Two-line + longer text action
Combines a two-line message with a longer text action. Suitable for notifications requiring a complex user action.
Design guidelines
Anatomy
- Status icon (optional)
- Text
- Action (optional)
- Close icon (optional)
Status icon
The status icon provides a visual cue related to the message being conveyed. It can represent a success, error, warning, or information message. These icons enhance user comprehension and quickly communicates the nature of the message.
These icons can be used in single-line snackbars but not for two-line snackbars.
Text
The text conveys the primary message or information that the snackbar is intended to communicate. It can vary in length depending on the type of snackbar. Remember to keep the message concise and clear.
Action
The action is a button or link that allows users to take a specific action directly from the snackbar.
For one-word actions, use a verb that clearly indicates what will happen. This could be something like "Undo" or "Retry."
Close icon
The close action allows users to dismiss the snackbar manually. This can be represented as an "X" icon or a swipe gesture, depending on the platform.
Best practices
- Make sure it doesn’t interfere with the main action if both are present.
- Consider the timing for automatic dismissal—users should have the option to dismiss at any time.
Placement
Snackbars should be placed at the bottom of a UI, in front of app content. For mobile, avoid placing a snackbar in front of frequently used touch targets or navigation.
In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.
Avoid displaying a snackbar container without elevation.
Snackbars should be placed at the left bottom of a UI.
Snackbars should not be placed on top.
On mobile, snackbars should be center-aligned.
Stacking
Snackbars can be stacked when two notifications need to be displayed at the same time after a user has performed a task. It should be organized as follows:
- The most recent snackbar will be displayed at the bottom and the oldest at the top.
- A maximum of 2 snackbars can be displayed at a time.
Don't display more than 2 snackbars at a time. Make sure the old one is dismissed automatically before showing a third one.
Colors
We use colors to determine the status of a notification. Each status corresponds to a color that conveys an emotion and provides the same experience to the user of our applications.
Sizing
On small screens, snackbars should expand vertically from 48dp to 60dp to accommodate one or two lines of text, while maintaining a fixed distance from the leading, trailing, and bottom edges of the screen.
On medium and large screens, snackbars should scale horizontally to accommodate longer text strings, keeping in mind that the ideal line length for text is typically between 40–60 characters.
Snackbars use a flexible distance from the trailing edge of the screen. Whenever possible, snackbars on medium and large displays should aim for a single line of text with an optional button.
Specs