Components
Snackbar
Snackbars are brief messages that inform users about the outcome of their actions. They appear temporarily at the bottom of the screen and may include an option to undo the action or dismiss the message.
Usage
A snackbar confirms that an action was completed successfully or if an error has occurred. It briefly appears and then disappears, keeping the experience smooth and non-intrusive. In some cases, it may include an action, allowing users to take a follow-up step, such as undoing a change or viewing more details
Principles
Clarity
A snackbar should be short and to the point. It delivers a message that is immediately understandable without extra effort. Avoid unnecessary details and keep the focus on the key information.
Visibility
The snackbar should stand out without being intrusive. It appears in a consistent location and remains visible long enough for the user to read it, but not so long that it becomes a distraction.
Actionable
If a snackbar includes an action, it should be relevant and useful. Undo, retry, or dismiss actions should be clear, easy to tap, and not interfere with reading the message. If no action is needed, let it disappear automatically.
When to use snackbars
Snackbars deliver lightweight messages that inform without interrupting and typically require no user action.
| Component | Priority | User Action |
|---|---|---|
| Snackbar | Low | Optional: Snackbars disappear automatically after a short duration. |
| Dialog | High | Required: Dialogs block app usage until the user takes an action or dismisses the dialog (if allowed). |
Properties
Snackbars have adaptable properties that align with various user scenarios.
Actions
None
Snackbars with only text deliver short, single-line messages about the completed action, with focus on clarity and simplicity.
One action
Communicating feedback with an action, such as "Undo," allows users to respond directly to a process or operation.
Only use when necessary
TODO: !!OBS!! Byt ut texten
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Long action
Long action labels reduce message space and make the snackbar harder to scan. Avoid when possible — use the “long action” layout only if the label can’t be shortened.
TODO: Byt ut titeln (kanske)
With (?)
Icon
Snackbars with an icon support quick message scanning by combining visual and textual cues. The icon helps to signal the message type — such as success, info, warning, or error — and adds clarity in fast-paced user flows.
Close action
Snackbars that include a close action, like "Undo", offer a way to immediately respond to a task or event. This improves usability by giving users control without interrupting their workflow.
Variants
The snackbar has three different communication styles designed to highlight the message's importance and context. These color schemes meet accessibility standards, helping users quickly understand the message's intent. These variants are intended for internal backend systems and are not utilized on the SVS online site.
Attention
Utilizes system attention colors for snappy notifications, ensuring high visibility and readability. Perfect for delivering important updates or feedback.
Success
Indicates successful actions or operations, using semantic coloring to reinforce positive outcomes.
Important
Highlights critical alerts or errors, using semantic red coloring to emphasize urgency and importance.
Formatting
Anatomy
The Snackbar consists of essential components like the container, content, and optional elements for presenting information or capturing input.
Snackbar
A – Container
B – Icon (optional)
C – Body
D – Action (optional)
E – Close action (optional)
Long action Snackbar
A – Container
B – Icon (optional)
C – Body
D – Close action (optional)
E – Primary action
Measurements
Snackbar
16px vertical padding (top & bottom)
20px left padding before icon
8px spacing between icon and text
16px spacing between text and action
16px right padding (after close icon)
Long action Snackbar
Same top layout as standard snackbar\nActions are stacked below the message with:
16px vertical spacing between message and buttons
Equal horizontal padding (16px)
8px spacing between stacked buttons
Best practices
Placement
Position the snackbar at the bottom center of the screen to avoid interfering with other UI elements, such as dialogs or floating action buttons, ensuring a seamless user experience.
Content
