Sonner (Toast)
shadcn/ui
Transient notifications. Auto-dismiss after 4s. Stack in the bottom-right corner.
@/components/ui/sonnerSetup
// Add once to layout.tsx:
import { Toaster } from "@/components/ui/sonner"
<Toaster richColors position="bottom-right" />
// Then in any component:
import { toast } from "sonner"
toast.success("Ticket saved")Toaster is already added to layout.tsx — just import toast and call it.
Types — click to trigger
| Type | Trigger | API | Note |
|---|---|---|---|
| default | toast(message) | Neutral — no color, no icon | |
| success | toast.success(message) | Green icon with richColors | |
| error | toast.error(message) | Red icon with richColors | |
| warning | toast.warning(message) | Orange icon with richColors | |
| info | toast.info(message) | Blue icon with richColors | |
| with description | toast(msg, { description }) | Secondary line below message | |
| with action | toast(msg, { action: { label, onClick } }) | Action button in toast — for Undo patterns | |
| loading → done | toast.promise(promise, { loading, success, error }) | Auto transitions loading → success/error |
Toaster props
| Prop | Default | Description |
|---|---|---|
| position | "bottom-right" | Where toasts appear: top-left/center/right, bottom-left/center/right |
| richColors | false | Colored backgrounds for success/error/warning/info |
| expand | false | Expand stacked toasts on hover |
| closeButton | false | Show X button on each toast |
| duration | 4000 | ms before auto-dismiss. 0 = never |
Sonner vs Alert
| Sonner | Alert | |
|---|---|---|
| Persistence | Auto-dismisses after 4s | Permanent until resolved or dismissed |
| Location | Overlay — bottom-right corner | Inline — part of page content |
| Best for | Action feedback: saved, deleted, assigned | Form errors, system-level warnings, SLA alerts |
On this page