Toast
A transient notification. Presentational only: queueing, timing, and positioning stay with your app.
Changes saved
Statuses
Deployed to production
v0.3.3 is live.
Upload failed
The file exceeded the 5MB limit.
Scheduled maintenance
Tonight, 01:00–02:00 UTC.
Dismissible
The close button is tied to onDismiss: no handler, no button. A toast that auto-expires doesn't need one.
Two seats left on your plan
Building a queue
Toast is the static card, so stacking rules, timers, and where it appears are yours. If you would rather not own that, use Sonner: mount one Toaster and call toast() from anywhere.
Each one clears itself after 4s.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'success' | 'error' | 'info' | 'info' | Sets the leading icon and its tint. |
| title | string | Headline text. | |
| description | string | Supporting line under the title. | |
| onDismiss | () => void | Fires when the x is clicked. The button only renders if this is set. |
Why it works this way
Why
- It is presentational only, so queueing and positioning are the app's job and it fits any notification system.
Don't
- Don't use a toast for anything people must act on. It disappears.
- Don't expect it to queue or position itself.