Components · Feedback
Toast
BetaA short confirmation that disappears, with undo, such as "Workout deleted".
- Source
components/ui/sonner.tsx - shadcn/ui Toast
- Figma: not linked yet (Q13)
Toasts confirm what just happened and offer a quick way back. They are built on Sonner and rendered by one <Toaster /> in the app layout.
- Upper body A
- Lower body A
When to use
- To confirm an action the coach just took: "Check-in sent", "Workout deleted".
- To offer Undo for a reversible destructive action, instead of a confirmation dialog.
- For the result of something that ran in the background: "Invoice sent".
When not to use
- For errors the coach must fix: use an Alert or an inline field error. Toasts disappear.
- For anything the coach needs to read twice or act on later.
- For information unrelated to what the coach just did.
Anatomy
A toast has an icon (for status toasts), a title, an optional description, and an optional action button such as Undo. Open one above to see the parts; they stack at the bottom end of the screen.
Variants
| Variant | Use for |
|---|---|
| Default | Neutral confirmation, usually with Undo |
success | A step the coach was waiting on finished |
warning | It worked, but something needs attention |
error | It didn't work; say what to do |
info | Something happened elsewhere that matters now |
promise | Loading, then success or error, for actions that take a moment |
Status toasts use the subtle status fills and text colors, not Sonner's built-in rich colors, which aren't tokens.
States
| State | Behavior |
|---|---|
| Entering, leaving | Slide and fade from the bottom end edge; instant with reduced motion |
| Hover or focus | The timer pauses while the pointer or focus is on the toast |
| Loading | Spinner icon until the promise settles |
Usage guidelines
- One toast per action. Don't queue several for the same event.
- Undo restores exactly what was removed. Sonner shows toasts for 4 seconds by default; give Undo toasts at least 8 (
duration: 8000) so coaches have time to react. - Don't put links that navigate away in a toast.
Content guidelines
- Title: the object and what happened, in past tense. "Workout deleted", "Invoice sent".
- 3 to 6 words. The description can name the item: "Upper body A".
- The action is one verb: "Undo", "View".
Accessibility
| Key | Does |
|---|---|
| Alt+T | Moves focus to the toast region (Sonner's default hotkey) |
| Tab | Moves to the toast's action |
- Toasts are announced through a polite live region: a screen reader reads "Workout deleted, Upper body A" without moving focus.
- Never put the only path to an action in a toast; Undo is a shortcut, and the item can be restored another way.
RTL
The toaster sits at the bottom end edge: bottom-right in LTR, bottom-left in RTL. Sonner gets dir from the site setting.
Tokens used
Read from components/ui/sonner.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.
| Token | Utilities | SuperCoach | Coach |
|---|---|---|---|
| --destructive | border-destructive | red-600 | red-600 |
| --destructive-subtle | bg-destructive-subtle | red-50 | red-50 |
| --destructive-text | text-destructive-text | red-700 | red-700 |
| --foreground | text-foreground | neutral-950 | neutral-950 |
| --info | text-info border-info | blue-700 | blue-700 |
| --info-subtle | bg-info-subtle | blue-50 | blue-50 |
| --muted | bg-muted | neutral-100 | neutral-100 |
| --muted-foreground | text-muted-foreground | neutral-600 | neutral-600 |
| --primary | bg-primary | brand-600 | orange-500 |
| --primary-foreground | text-primary-foreground | white | white |
| --success | border-success | green-600 | green-600 |
| --success-subtle | bg-success-subtle | green-50 | green-50 |
| --success-text | text-success-text | green-700 | green-700 |
| --warning | border-warning | amber-500 | amber-500 |
| --warning-subtle | bg-warning-subtle | amber-50 | amber-50 |
| --warning-text | text-warning-text | amber-800 | amber-800 |
- Shadow
shadow-lg - Type
font-medium
Props
<Toaster>
No props of its own.
All other options are Sonner's Toaster props. Call toast(), toast.success(), toast.error(), toast.warning(), toast.info() or toast.promise() from sonner.
Replaces in coach-admin
From the read-only audit of coach-admin: 31 style values, 33 uses.
coach-admin's undo snackbar and mobile toaster both become this component.
Classes and selectors
.undo-snackbar5.toast5.undo-snackbar__progress-bar4.undo-snackbar__action3.undo-snackbar__progress2.client-import-toast__action2.mobile-toast--info1.undo-snackbar__countdown1.undo-snackbar__progress-bar--paused1
Files
src/reusableComponents/undo-snackbar/undo-snackbar.scss22src/reusableComponents/helpers/MobileToaster.tsx3
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$undo-snackbar-z-indexnot a color: spacing, size or layout$snackbar-bg-colornot a color: spacing, size or layout$snackbar-hover-colornot a color: spacing, size or layout$snackbar-track-colornot a color: spacing, size or layout$min-tap-target-sizenot a color: spacing, size or layout$white-text-color→--primary-foreground$snackbar-outline-colornot a color: spacing, size or layout$snackbar-shadow-colornot a color: spacing, size or layout