components
Toast
A transient message built on Radix Toast. It rises from the bottom edge, sits above the safe-area inset, auto-dismisses, and can be swiped down or closed. The tone drives a soft tinted surface and a leading status icon.
Tones
Each tone maps to a status icon: success, info, warning, and danger. Neutral and other tones fall back to the info icon. Trigger one to see it appear at the bottom.
ToastOptions
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | none | Required. The toast headline. |
| description | string | none | Optional supporting line. |
| tone | Tone | "neutral" | Drives the surface tint and leading icon. |
| duration | number | 5000 | Auto-dismiss delay in ms. |
Provider and hook
| Prop | Type | Default | Description |
|---|---|---|---|
| ToastProvider | { children, duration? } | none | Wrap your app (or a subtree) once. Hosts the viewport and toast stack. |
| useToast | () => { toast } | none | Returns toast(options) to push a message. Must be called inside a ToastProvider. |