NotificationToast
React toast notifications fired from a toast() function: variants, actions such as undo, updates in place, and a single viewport mounted near the app root.
Call toast(message, options) or toast.success(...) from anywhere; the <NotificationToast /> viewport is mounted once near the app root.
When to use
Use NotificationToast for short confirmations that need no reply: "Request submitted", "Copied", "Saved". Call toast() or toast.success() from event handlers and mount one <NotificationToast /> near the root.
Offer an undo action for reversible operations. For messages the user must read or act on, use InlineAlert or Notification, which do not disappear.
Examples
Props
Props declared by NotificationToast. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
position | ToastPosition | Where toasts stack. Logical: start/end flip in RTL. Default bottom-end. | |
containerized | boolean | Pin the viewport to a positioned ancestor (via position: absolute)
instead of the browser viewport (position: fixed). Set this for
Storybook stories, embedded widgets, and any layout where the NotificationToast
should stay within a parent box. Caller is responsible for placing the
NotificationToast inside an element with position: relative (or other positioned
containing block). | |
duration | number | ms; default 4000. Set 0 (or Infinity) to disable auto-dismiss globally. | |
closeButton | boolean | Show a close (X) button on each toast. Defaults to true. | |
closeLabel | string | Localized label for the close button. Default "Dismiss". | |
hideIcon | boolean | Hide the default leading icon per variant. | |
className | string | Extra class on the Radix Viewport. | |
swipeDirection | "right" | "left" | "up" | "down" | Override swipe direction. Defaults based on position. | |
store | ToastStore | The toast store this NotificationToast subscribes to. Defaults to the module-level
singleton so the bare toast() API works without setup. Pass an isolated
store (created via createToastStore() + createToast(store)) when you
need multiple independent NotificationToasts on the same page - common in
Storybook, docs sites, and embedded widgets. |
Accessibility
Toasts are announced through the viewport's live region, so screen reader users hear them without losing focus. Each toast's dismiss button has an accessible name, and actions are real buttons.
Because toasts are transient, never put required information only in a toast. Repeat outcomes in the page content where users can find them later.