Snackbar
Intro
A snackbar provides a brief message about an app’s processes at the bottom of the screen.
Usage
- Provides updates on an app’s processes
- Appears temporarily and disappears on its own without requiring the user’s dismissal
- Contains a single action
- Non-interruptive
- User action is not required
- Self-dismissing
- 0-1 actions
Types
Snackbar with Text Label
The message on the snackbar directly relates to the process being performed (for example, files have been moved, item added to cart). On mobile, the text label can have 2 lines of text.
Snackbar with Action
Snackbars can display a single text button that allows users to take action on a process performed by the app. To distinguish the action from the text label, the action text should be tinted.
A. Snackbar with Text Label
B. Snackbar with 2 Lines of Text
Behavior
A snackbar appears at the bottom of the screen and does not require the user’s dismissal. It appears momentarily and dismisses itself after 4-10 seconds.
Consecutive Snackbars
When multiple app updates are necessary, snackbars should appear one at a time.
Specs
Placement
One Line of Text
One Line of Text with Action
Two Lines of Text
Two Lines of Text with action
Two Lines of Text with Long Action Text
| Sample | Element | Alpha Hex |
|
|
Container | #32363A |
|
|
Text | #FFFFFF |
|
|
Text button | #D3E8FD |