Brief confirmations that never block the work.
| Prop / event | Type | Notes |
|---|---|---|
| variant | success · error · info · warn | Icon and accent colour |
| action | { label, onClick } | One inline warm action, like Undo |
| duration | number | Auto-dismiss ms; pauses on hover / focus |
| dismissible | boolean | Shows the manual close × |
| position | bottom-center · bottom-right | Where the stack anchors |
A Snackbar confirms briefly and never blocks. For a message that needs a decision use a Modal; for persistent inline emphasis use a Callout.
One line, one action. Confirm and let the reader move on.
Don't write a paragraph. Long copy belongs in a Callout or Modal.
Give errors a way forward. A Retry beats a dead end.
Don't stack multiple actions. A toast holds one, at most.
Quiet confirmation after an autosave or explicit save.
Reversible destructive actions with a short Undo window.
Transient failures that the user can immediately retry.
| Token | Value | Role |
|---|---|---|
| --snack-bg | #1A1B1F | Bar surface |
| --snack-shadow | 0 14px 34px /.45 | Lift off the page |
| --snack-success | #4FCE8B | Success icon |
| --snack-error | #F2777B | Error icon |
| --snack-action | #FF9D45 | Inline action label |
| --snack-duration | 4000ms | Default auto-dismiss |
<div class="o-snack o-snack--success" role="status"> <span class="o-snack__icon"><CheckIcon /></span> <span class="o-snack__text">Changes saved.</span> <button class="o-snack__action">Undo</button> <button class="o-snack__close" aria-label="Dismiss">×</button> </div>