docs / core / toast
Toast
a brief message that announces something just happened. mount Toaster once, then fire toast() from anywhere, even outside React.
intensity · recedesrsc · client
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
Toaster mounts once in the root layout, the viewport portals itselffire from event handlers, async callbacks, non-React modulesnever two Toasters. two viewports means every toast twicenot for form errors. those belong inline, next to the fielda11y
the close button is labelled Dismiss · icons, dots and the countdown bar arearia-hidden · swipe down or right to dismissjest-axedependencies
@base-ui/reactlive demo · try it out
toast() options
| prop | type | default | notes |
|---|---|---|---|
| title | ReactNode | — | the headline. the only required field. |
| description | ReactNode | — | supporting copy under the title. |
| type | "success" | "warning" | "danger" | "info" | — | the status icon, dot and tint. untyped toasts render plain. |
| duration | number | — | auto-dismiss in ms, drawn as a countdown bar. 0 disables it, for toasts that need a decision. |
| action | { label: string; onClick?: () => void } | — | one inline action button. more than that is a Dialog. |
Toaster
| prop | type | default | notes |
|---|---|---|---|
| limit | number | — | how many toasts stack before the oldest collapses. |
| timeout | number | — | the default duration for toasts that do not set their own. |
get it
bun add @usva-ui/reactusage
import { notify, toast, Toaster } from "@usva-ui/react/primitives/toast";
<Toaster />
toast({ title: "Saved", description: "Your changes are live.", type: "success" });
notify.error("Upload failed");