Search for a command to run...
Transient toast notifications via sonner. Top-right glass pills with status icons that swap to a close button on hover. Mount `<Toaster />` once at the app root, then call `toast()` from anywhere.
The Toaster runs sonner in unstyled mode so our glass.overlay surface + canonical tokens take over instead of sonner's defaults. The status icons (success / info / warning / error / loading) use the system status tokens — text-success, text-warning, etc.
ToasterMount once at the app root. Forwards every sonner ToasterProps on top of our defaults.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | … | "top-right" | Where toasts anchor on the viewport. |
offset | number | 12 | Distance (px) from the viewport edge. |
closeButton | boolean | true | Render the round close button. Lives in the icon slot and swaps in on hover. |
theme | "system" | "light" | "dark" | from next-themes | Drives sonner's internal theme detection. Our surface tokens auto-invert independently. |
toast(message, options)The imperative API from sonner. Common shapes:
Every option from sonner's toast API is supported — duration, dismissible, id for de-duping, onAutoClose / onDismiss callbacks, etc.
Reach for toast.success / toast.error / toast.info / toast.warning so the status icon
matches the message — the green tick / red x / amber triangle read instantly.
Pair an action button (Undo, View) with toasts that confirm a reversible change. The icon
auto-swaps for the close button when an action is present.
Use toast.promise(...) for async work — sonner cross-fades the loading spinner into the final
success/error toast without you wiring up state.
Use a toast for anything the user has to act on right now. Toasts auto-dismiss after 3s — if
the choice is critical, use Dialog or AlertDialog.
Stack toasts that report the same thing. Pass a stable id so subsequent calls update the
existing toast instead of piling up.
Mount more than one Toaster. Sonner already routes every toast() call to the single mounted
instance; extra Toasters duplicate every notification.