vert-ui
Browse docs
All components

Toast

Ephemeral confirmation in a corner stack. Toasts announce politely, are swipeable on touch and never block the page.

Preview

Live preview

    Usage

    Examples

    Success with undo

      <ToastProvider>
  <Toast open={saved} onOpenChange={setSaved} variant="success">
    <ToastTitle>Changes saved</ToastTitle>
    <ToastDescription>Workspace settings updated.</ToastDescription>
    <ToastAction altText="Undo" onClick={undo}>Undo</ToastAction>
    <ToastClose />
  </Toast>
  <ToastViewport />
</ToastProvider>

      Destructive, kept open until dismissed

      Deploy failed

      Build 4192 could not reach the registry.

      <Toast open={failed} onOpenChange={setFailed} variant="destructive">
  <ToastTitle>Deploy failed</ToastTitle>
  <ToastDescription>Build 4192 could not reach the registry.</ToastDescription>
  <ToastClose />
</Toast>

      Reference

      Props

      PropTypeDefaultDescription
      ToastProvider durationnumber5000Milliseconds before a toast auto-dismisses. Foreground toasts never auto-dismiss.
      Toast variant"default" | "brand" | "success" | "warning" | "destructive""default"Color of the card; destructive also switches to role="alert".
      Toast open / onOpenChangeboolean / (open: boolean) => void—Drive toasts from your own state (recommended: keep a queue).
      ToastAction altText(required)string—Accessible name for the action button (Radix requires it).
      ToastViewport classNamestring—Position of the stack — fixed bottom-right by default.

      Accessibility

      Accessibility notes

      • Default toasts render role="status" (polite); destructive ones render role="alert" (assertive) because variant switches the Radix type to foreground.
      • Foreground toasts never auto-dismiss — an error stays until the user dismisses it.
      • Always give ToastAction an altText so the button has a name out of context.
      • The close button is labelled "Dismiss"; swipe is an enhancement, never the only way out.
      • Viewport lives at the bottom (stacked, z-100) and does not trap focus — the page keeps working.