Snackbars
Snackbars are user interface elements designed to deliver concise and timely messages about ongoing app processes or events. Positioned at the bottom of the screen, they offer unobtrusive notifications to keep users informed without disrupting their current tasks. Snackbars are a valuable tool in enhancing user experience, as they provide essential feedback and updates, such as success messages, error notifications, or confirmations, in a non-intrusive and easily dismissible manner, ensuring users stay informed while maintaining the flow of their interactions within the app.
Variant
Here are some types of snackbars, including:
Anatomy
- Container
- Text Label
- Action (Optional)
Usage
Snackbars are unobtrusive information elements used to notify users about a process an app has executed or is about to execute. These temporary messages appear briefly at the bottom of the screen, ensuring they don’t disrupt the user experience. Unlike modal dialogs or pop-ups, snackbars do not demand user input to dismiss them; instead, they automatically fade away. Their purpose is to provide quick, non-invasive updates, such as success confirmations, error alerts, or status messages, allowing users to stay informed while seamlessly continuing their interactions within the app.
Frequency
Only one snackbar may be displayed at a time.
Actions
A snackbar can contain a single action. “Dismiss” or “cancel” actions are optional.
When to use
Dialogs should be used for:
- Errors thet block an app’s normal operation
- Critical information that requires a specific user task, decision, or acknowledgement
Text label
Snackbars feature a concise text label that directly corresponds to the ongoing or completed process. On mobile devices, the text label can accommodate up to two lines of text, ensuring that the information presented is clear and informative within the limited screen real estate. This design approach optimizes the space available while delivering meaningful and contextually relevant messages to users in a straightforward and visually efficient manner.
Do
Text labels are short, clear updates on processes that have been performed.
Do
Use up to two lines of text to communicate the snackbar message.
Dont
Don’t use icons in snackbars. If your message needs an icon, consider using a different component.
Container
Snackbars are presented in rectangular containers with a grey background. These containers are intentionally designed to be fully opaque, ensuring that the text labels within them remain legible and easily readable. This visual consistency and clarity contribute to the effectiveness of snackbars in conveying important information to users without any ambiguity or readability issues.
Action
Snackbars have the capability to include a single text button that allows users to take action related to a process performed by the app. However, it’s crucial to note that snackbars should not serve as the sole means to access a core use case or functionality within the app. They are primarily designed for brief notifications and supplementary actions, and the app’s core features should be accessible through more prominent and consistent means to ensure usability and a smooth user experience. Snackbars are best used to provide context-specific information and actions without replacing or hindering the primary navigation and interaction methods in the app.
Snackbars with action
To differentiate the action from the text label in snackbars, text buttons should feature colored text. Using distinct colors for the text button helps users easily identify and understand that the text in a different color represents an actionable element within the snackbar. This visual distinction enhances the clarity and user-friendliness of the interface, ensuring that users can readily recognize and interact with the button to perform the desired action.
