components / toast
toast.
stacked, auto-dismissing notifications. a ToastProvider plus a useToast() hook, with pause-on-hover, a polite live region, and six anchor corners.
installation
bunx @justin06lee/chrome@latest add toastprops
| name | type | default | description |
|---|---|---|---|
| children | ReactNode | - | the tree that can call useToast(). |
| position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-right' | corner the stack grows from. bottom corners stack upward so the newest toast sits nearest the corner. |
| duration | number | 4000 | default auto-dismiss delay in ms for toasts that don't set their own. |
| max | number | 4 | how many toasts stay on screen; the oldest fall off past this. |
| anchor | 'viewport' | 'container' | 'viewport' | 'viewport' pins the stack to the window; 'container' pins it to the nearest positioned ancestor, for toasts scoped to a panel. |
| label | string | 'notifications' | accessible name for the aria-live region. |
| className | string | - | extra classes for the viewport. |
| toast(options).title * | ReactNode | - | toast() option — the headline line. |
| toast(options).description | ReactNode | - | toast() option — secondary copy under the title. |
| toast(options).variant | 'default' | 'success' | 'danger' | 'default' | toast() option — tone. success is marked by a check icon; danger is the only variant that spends color (red). |
| toast(options).duration | number | - | toast() option — ms before auto-dismiss, overriding the provider default. 0 or Infinity pins it until dismissed by hand. |
| toast(options).action | ReactNode | - | toast() option — trailing slot under the copy, e.g. an undo button. pair with duration: 0 so it stays reachable. |
| useToast().toast | (options: ToastOptions) => string | - | queues a toast and returns its id. |
| useToast().dismiss | (id?: string) => void | - | dismisses one toast by id, or every toast when called with no argument. |