Toast
A Toast gives transient feedback that an operation finished — successfully or not. It's fixed to the bottom-center of the viewport, above all window chrome, and dismisses itself automatically.
Overview
When to use
- Confirming the result of an action the user just took (a save, an import, a copy) where no other UI already shows the outcome.
When not to use
- For a persistent or actionable message the user needs to read and respond to — use Alert instead, which stays on screen and supports an action button.
- For a process that's still running — use Loader while it's in flight, then a Toast once it resolves.
Variants
Both variants auto-dismiss — there's no manual close button. success clears after 3 seconds; error stays up longer (6 seconds) since there's more to read and no dismiss button to fall back on. Override either duration with the duration prop.
Accessibility
success renders with role="status"/aria-live="polite"; error uses role="alert"/aria-live="assertive", since a failure is more important to interrupt with.
<Toast variant="error" message="Import failed — try again" onDismiss={() => setToast(null)} />
The parent owns whether a Toast is rendered at all (conditional render) — Toast only owns its own dismiss timer, calling onDismiss once when it elapses.
Controls
Interactive controls are available in Storybook. Open Storybook
Props
Token mapping
| Property | Token |
|---|---|
| success background | --color-bg-alert-positive |
| success border | --color-border-alert-positive |
| error background | --color-bg-alert-negative |
| error border | --color-border-alert-negative |
| message text | --color-text-on-vivid |
| bevel highlight | --bevel-highlight |
| bevel shadow | --bevel-shadow |
Do's and don'ts
| Do | Don't |
|---|---|
| Keep the message to one short line — there's no scrolling and no second action. | Use Toast for something the user must act on — it disappears on its own. |
| Render at most one Toast at a time (replace, don't stack). | Rely on the toast alone to explain a validation failure with multiple causes — fix the root message to be specific first. |
Changelog
| Date | Change |
|---|---|
| 2026-08-24 | Initial component — built for the Gym app's in-app training-sync feature. Added --color-bg-alert-positive/--color-border-alert-positive tokens alongside it (Alert itself doesn't gain a positive type yet — not asked for) |