Sonner
Toast notification system. Drop Toaster once at the app root and call toast() from anywhere to show a transient message.
When to use Sonner vs Notifications
Sonner is the transient toast (success, error, info — auto-dismiss). Notifications is the persistent inbox list with unread badge.
Default
Trigger a toast from a Button click.
Variants
Success, error, info, warning.
API Reference
Props, events, and slots for each sub-component.
Toaster
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center" | "bottom-right" | Anchor for the stack. |
| richColors | boolean | false | Use coloured variants instead of plain. |
| expand | boolean | false | Expand stack on hover instead of overlapping. |
| progressBar | boolean | true | Show a full-size auto-dismiss progress fill behind each toast. Pauses on hover; follows the global duration; disabled when expand is on. |
Slots
| Slot | Description |
|---|---|
| info-icon | Override the icon used for info toasts. |
| success-icon | Override the icon used for success toasts. |
| warning-icon | Override the icon used for warning toasts. |
| error-icon | Override the icon used for error toasts. |
toast() (function)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | — | First argument. The body of the toast. |
| options | { description?, action?, duration?, ... } | — | Second argument with extra config. |