Snackbars are UI elements that inform the user of an action that has been performed by an app or will perform in the future. They appear at the bottom of the screen temporarily.
Snackbars must not interrupt any user activity or experience. They also should not cause any user input to disappear.
Only one snackbar should appear at one time. A snackbar can contain a single action. “Dismiss” or “cancel” are optional actions.
Snackbars are:
Informational: They provide information regarding an action or process performed by the app.
Temporary: They disappear on their own without requiring the user input to be dismissed.
Contextual: They are placed on the interface where they do not interrupt actions but provide relevant information.
A snackbar contains a:
Text label: Informs the user about the process that is being performed.
Container: The box in which the content of the snackbar is displayed. It is usually grey and should be completely opaque, so the text label is clearly visible.
Action (optional): A single text button that allows the user to perform an action. Snackbars should not be the only way for users to access an app’s core functionality. The button should be of a different color than the text label to distinguish both.
Snackbars should appear and disappear automatically without requiring the user to do anything. They disappear in a minimum of 4 seconds and a maximum of 10 seconds. They also appear without a warning.
When multiple snackbar updates are required, they should appear one at a time and not together.
The following illustrations show some sample snackbars:
Free Resources