Loading...
🍄
Snackbars
Definition
Provide brief messages about application processes with a CTA. There's
ALWAYS
an action for a user in a snackbar.
Visual Examples
Usage
Informs user of a process that an app has performed or will perform
Should not interrupt experience
Can stack
Principles
Informational:
provides updates on app process
Feedback:
gives users feedback in response to actions they take
Interactive:
allows for user interactions to dismiss or take further action
Types
Similar to a
toast
, but more versatile and customizable with
actions
and interactive by nature
Priority
Low/Non-critical
Behavior
Appear sticky at the bottom of the page
Actions for users to take
Atomic Model Identification
Organism
(can
be placed without other UI elements)
Recommendations
Snackbars
should be used when there are actions available
Ex.
"Report
generated,
click to view.
"
"Ticket
needs your attention,
click to view.
"
Contain actions and a close button
Interactive and persist until action taken
Appear at the bottom of the screen
Dos and Don'ts
Do
Use elevation and a dark background so that snackbars are easily identified.
Don't
Do not alter the shape of the snackbar container.
Content
Content
Content
Content
Accessibility Requirements & Resources
Toasts should not acquire keyboard focus upon appearing.
Toasts should not contain long messages since they disappear automatically.
Screen readers do not interact with toasts, but can interact with snackbar actions.
Mountaineer Design System Link
https://www.figma.com/file/XbSxsYfvX17wGgArPxK22f/%F0%9F%8F%94-Mountaineer-Design-System?node-id=1179%3A9
Related Components
+
Toasts
+
Icons
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
Definition
Visual Examples
Usage
Principles
Types
Priority
Behavior
Atomic Model Identification
Recommendations
Dos and Don'ts
Content
Accessibility Requirements & Resources
Mountaineer Design System Link
Related Components