Undo Toast
Toasts
Source and install need .
pnpm dlx shadcn@latest add @assembli/toastToast
The toast on its own, ready for any toaster: five intents (neutral, success, info, warning, error) in five finishes (card, tinted, accent rail, solid, inverse), with a title, description, filled and quiet actions that take the finish's colours, a close button and an optional draining timer that pauses on hover.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
intent
ToastIntent
Default
"neutral"variant
ToastVariant
Default
"card"title*
React.ReactNode
description
React.ReactNode
icon
React.ReactNode | false
Replace the intent's icon, or pass
falseto hide it.actions
React.ReactNode
Buttons, usually
<ToastAction>s.onDismiss
() => void
duration
number
Milliseconds before
onDismissfires, shown as a draining bar. Hover or focus holds it. Changekeyto restart it.
| Prop | Type | Default | Description |
|---|---|---|---|
| intent | ToastIntent | "neutral" | |
| variant | ToastVariant | "card" | |
| title* | React.ReactNode | – | |
| description | React.ReactNode | – | |
| icon | React.ReactNode | false | – | Replace the intent's icon, or pass false to hide it. |
| actions | React.ReactNode | – | Buttons, usually <ToastAction>s. |
| onDismiss | () => void | – | |
| duration | number | – | Milliseconds before onDismiss fires, shown as a draining bar. Hover or focus holds it. Change key to restart it. |
