Toast
Toast provider and imperative notification API.
Quick Preview
Usage
<ToastProvider><Button onClick={() => toast.success({ title: "Saved" })}>Show toast</Button></ToastProvider>Examples
Default Toast
Use this as the starting point for Toast. Keep product data, routing, fetching, and authorization logic in the consuming app.
Custom Toast
toast.add accepts a render function that replaces the icon/title/description layout with your own markup — an avatar, inline actions, a progress row. The toast keeps its stacking, swipe-to-dismiss, and timeout behavior, and render receives close to dismiss it. Use className to restyle the surface itself.
toast.add({
className: "w-[min(360px,calc(100vw-32px))]",
render: ({ close }) => (
<div className="flex items-start gap-3 p-3">
<Avatar className="size-9">
<AvatarFallback>AO</AvatarFallback>
</Avatar>
<Button size="sm" onClick={close}>
Accept
</Button>
</div>
),
});Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
toast.add | ToastAddOptions | - | Adds a toast; accepts render and className alongside the standard options. |
toast.success/info/warning/error/loading | toast add options | - | Creates typed toast variants. |
toast.update / toast.dismiss / toast.promise | - | - | Updates, closes, or drives a toast from a promise. |
render | ({ toast, close }) => ReactNode | - | Replaces the toast body. close dismisses with the exit transition. |
className | string | - | Merged into the toast surface — width, padding, colors. |
ToastProvider | PropsWithChildren | - | Renders toast viewport and items. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.