Snackbar
Inline notification — 320px wide, 48px tall, with a leading icon, label, optional action button, and dismiss × button. Seven colour variants (brand · info · danger · success · warning · notice · alert) × three states (semi-filled · filled · border). Use the interactive triggers below to see how each variant renders in real time, then position the toast around the viewport with the Positions demo. Values from Figma node 161-5424.
When to use
- Use for brief, transient feedback after a user action (saved, deleted, sent, copied)
- Auto-dismiss after 3–5 seconds — the user should not need to interact with it
- Provide an optional undo/action button for reversible operations
- Position bottom-center or bottom-right — least disruptive placement
- Use for persistent messages — use Alert instead
- Show more than one Snackbar at a time — queue them
- Use for error messages that require user attention — use Alert or an inline error
- Put critical information in a Snackbar — it disappears too quickly
DigiLawyer Patterns
No specific DigiLawyer patterns documented yet — to be added.
Anatomy
A Snackbar is a compact notification bar with an icon, message, optional action, and dismiss button.
- 1Container —
.snackbar. 320px wide, 48px tall. Add colour + variant modifier. - 2Icon —
.snackbar-icon. 16px leading icon. - 3Label —
.snackbar-label. Body 2 Regular message text. - 4Action —
.snackbar-action. Optional. Caption 1 Semi Bold text button. - 5Dismiss —
.snackbar-close. × icon button, trailing.
Default
The minimal snackbar is a .snackbar container with three slots: a leading .snackbar-icon, a .snackbar-label, and a trailing .snackbar-actions group holding an optional action button (composes with .btn.btn-primary.btn-sm) and a .snackbar-close × button. Default variant is Brand, default state is Semi-filled.
<div class="snackbar" role="status"> <span class="snackbar-icon"><svg>…</svg></span> <span class="snackbar-label">Label</span> <div class="snackbar-actions"> <button class="btn btn-primary btn-sm">Label</button> <button class="snackbar-close" aria-label="Close"><svg>…</svg></button> </div> </div>
Variants
Seven colour intents. Brand is the neutral default. Info (blue), Success (green), Warning (yellow), Danger (red), Notice (purple), and Alert (orange) all map to the system's semantic palette. The seven shown below are in the Semi-filled state.
States
Three visual treatments per variant. Semi-filled (default) — pale tinted background with the variant's deep colour for icon + text. Filled (.snackbar-filled) — solid deep-colour background with white text; the action button inverts to white-on-deep. Border (.snackbar-border) — page-coloured background with a 1px colored hairline + deep text.
Interactive
Mirrors the MUI Snackbar demo pattern — each button below fires a real snackbar at the top-right of the viewport with the chosen variant + state. The State toggle is a segmented control (.btn-group.btn-group-active-border) — the selected state shows the canonical active treatment. The 7 variant triggers preview the colour and state they'll fire — flip the State toggle and watch the trigger buttons re-style live. Toasts stack downward, auto-dismiss after 4 seconds; dismiss early with the × button.
Positions
Anchor toasts to any of six viewport corners — top-left / top-center / top-right / bottom-left / bottom-center / bottom-right. Each position has its own stacking region; firing into a region with existing toasts adds the new one to the column. The buttons below all fire an Info Filled snackbar at the chosen anchor (the triggers themselves preview that style) — click multiple to see them stack.
Full matrix
7 variants × 3 states = 21 cells, mirroring Figma 1:1.
Accessibility
| Attribute / Behaviour | Value | Notes |
|---|---|---|
| Role | role="status" | Announces the message politely to screen readers without interrupting |
| Live region | aria-live="polite" | Use polite for informational messages; aria-live="assertive" only for critical errors |
| Dismiss button | aria-label="Dismiss" | The × icon needs a text alternative |
| Auto-dismiss timing | 3–5 seconds minimum | Users with cognitive disabilities need enough time to read and act on the message |
| Pause on hover | Pause auto-dismiss timer on :hover / :focus-within | Allow users to read or interact before the snackbar disappears |
API
| Class / attr | On | Description |
|---|---|---|
| .snackbar | <div role="status"> (or role="alert" for Danger) | The toast container — 320×48, radius 8, padding 12/8, flex with the icon · label · actions slots. Default variant is Brand, default state is Semi-filled. |
| .snackbar-icon | <span> | Leading slot. Wrap an inline SVG; sized 24×24. Inherits currentColor so it picks up the variant text colour. |
| .snackbar-label | <span> | The message body. Caption 1 Medium (12/16). Truncates with ellipsis on overflow. |
| .snackbar-actions | <div> | Trailing slot holding the optional action button + the close button. |
| .snackbar-close | <button aria-label="Close"> | The dismiss × button. Native <button>, transparent bg, 24×24 hit area. |
| .snackbar-brand / -info / -danger / -success / -warning / -notice / -alert | .snackbar | Variant modifier. Required — pick exactly one. Drives the deep colour used by icon, text, action button, and (in Border state) the hairline. |
| (no state class) | .snackbar | Semi-filled (default) — pale tinted bg, deep text, normal primary action button. |
| .snackbar-filled | .snackbar | Solid deep-colour bg + white text. Action button inverts to white-on-deep via a descendant rule. |
| .snackbar-border | .snackbar | Page bg + 1px colored hairline + deep text. |
| .snackbar-region | <div> | Fixed-position stacking region. Compose with one of the position helpers below. Pointer-events pass through the region container (so only the toasts catch clicks). |
| .is-top-left / .is-top-center / .is-top-right .is-bottom-left / .is-bottom-center / .is-bottom-right | .snackbar-region | Six viewport anchors. Top regions stack downward; bottom regions stack upward via reverse insertion (handled in the page script's stacking logic). |
| .snackbar-toast / .is-leaving | .snackbar | Animation hooks for slide-in (snackbar-in) and slide-out (snackbar-out). The page script adds .snackbar-toast on creation and .is-leaving on dismiss. |
| role="status" / "alert" | .snackbar | Use role="status" for informational / success / warning toasts (polite); use role="alert" for danger / error toasts (assertive). The screen reader reads matter-of-factly vs interrupts accordingly. |