FEEDBACK

Toast

Transient notification that slides in from the screen edge. Built on Radix Toast — full ARIA live-region wiring, swipe-to-dismiss, and pause-on-hover come from the primitive. Use for non-blocking feedback (saved, copied, sent); for critical errors that need acknowledgement use Dialog with severity="alert".

Import

1import {
2  ToastProvider,
3  ToastViewport,
4  Toast,
5  ToastTitle,
6  ToastDescription,
7  ToastAction,
8  ToastClose,
9} from 'damo-ui'

Provider + viewport — once per app

Mount one ToastProvider + ToastViewport at the root of your app. All toasts emitted anywhere in the tree render inside the viewport.

1// In your root layout — exactly one provider + viewport per app:
2<ToastProvider>
3  {children}
4  <ToastViewport />
5</ToastProvider>

Variants — try the preview

Click each button to slide the matching toast into the bottom-right of its preview frame. Real Toast instances mounted inside a scoped ToastProvider + ToastViewport — same wiring you'd ship in production.

          <Toast variant="success">…</Toast>

          Emitting a toast

          Toasts in Radix are state-driven: render a <Toast /> with controlled open and toggle it from your event handlers. For app-wide toast emission, build a thin context that owns the queue.

          1function ExampleToaster() {
2  const [open, setOpen] = useState(false)
3
4  return (
5    <>
6      <Button onClick={() => setOpen(true)}>Show toast</Button>
7      <Toast open={open} onOpenChange={setOpen} variant="success">
8        <div className="flex-1 min-w-0">
9          <ToastTitle>Saved</ToastTitle>
10          <ToastDescription>Your changes were committed.</ToastDescription>
11        </div>
12        <ToastAction altText="Undo">Undo</ToastAction>
13        <ToastClose />
14      </Toast>
15    </>
16  )
17}

          Props

          Toast props
          PropTypeDefaultDescription
          variant'default' | 'success' | 'warning' | 'danger''default'Sets the background tint and Memphis shadow color. Mirrors the variant tokens used by Banner.
          openboolean—Controlled open state. Pair with onOpenChange.
          onOpenChange(open: boolean) => void—Fires when the toast opens or closes.
          durationnumber5000Auto-dismiss timeout in milliseconds. Pass Infinity to disable.
          altTextstring—Prop on ToastAction. Required by Radix when the trigger has no text — used as the accessible action name.

          Accessibility

          • The viewport sets role="region" with aria-label="Notifications". Toasts inside render with appropriate role + aria-live per Radix.
          • When using ToastAction, supply altText — the accessibility name read aloud when the toast appears. Without it Radix throws.
          • Hovering or focusing the viewport pauses the auto-dismiss timer; F6 jumps focus into the viewport from anywhere on the page.
          ← TooltipProgress →