Components · shadcn sonner
Toast
Toasts confirm things that already happened: “Form sent”. They float bottom-right (bottom-center on phones), carry a status edge and icon, and never take focus.
Demo
Render <Toaster /> once in the root layout, then call notify. Sonner runs unstyled and every class is a token, so toasts follow the theme on their own.
Preview
Show codeHide code
import { notify } from "@ppitsz/ui/components/sonner"
notify.success("Form sent", { description: "We'll let you know by email." })
notify.danger("Upload failed", { description: "The file is larger than 10 MB." })Timing
notify builds these rules in, so call sites can't get them wrong.
| Tone | Dismisses | With an action |
|---|---|---|
| success, info | After 5 seconds | After 8 seconds |
| warning, danger | Stays until closed | Stays until closed |
The timer pauses on hover and focus. At most three are visible.
Rules
- Blocking errors go inline, next to the problem, not in a toast.
- A toast's action must also be reachable elsewhere on the page.
- Never move focus to a toast.