Components
Sonner
An opinionated toast notification system — render the Toaster once and fire transient messages from anywhere with the imperative toast() function.
Basic usage
Mount <Toaster /> once at the root of your app, then call toast() from any event handler.
Variants
Use toast.success, toast.error, toast.warning, and toast.info to add a leading status icon.
Descriptions, actions & promises
Pass a second options argument for a description and an action button, or use toast.promise to track an async task through loading, success, and error states.
Props
Props for the <Toaster /> provider. Per-toast options like description, action, and duration are passed to toast() directly.
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-right' | Where toasts stack on the screen. |
theme | 'light' | 'dark' | 'system' | 'system' | Color scheme of the toasts. Wired to next-themes by default. |
richColors | boolean | false | Use saturated success / error / warning colors instead of the neutral surface. |
expand | boolean | false | Expand all stacked toasts on hover instead of collapsing them. |
visibleToasts | number | 3 | Maximum number of toasts visible at once. |
closeButton | boolean | false | Render a dismiss button on every toast. |
duration | number | 4000 | Default time in milliseconds a toast stays on screen. |
offset | string | number | 32 | Distance from the edges of the viewport. |
gap | number | 14 | Vertical gap between stacked toasts in pixels. |
...rest | ToasterProps | — | All sonner Toaster props are forwarded. |
Accessibility
- Toasts are rendered into an
aria-liveregion so screen readers announce new messages without moving focus. - Status messages use
role="status"for polite announcements; never rely on color alone — keep the message text descriptive. - Hovering or focusing a toast pauses its auto-dismiss timer, giving users time to read and reach action buttons.
- Press F6 to move focus to the toast region, then Tab to its action and close controls.