Toast

A succinct message that is displayed temporarily.

import {
  Toast,
  ToastAction,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function ToastExample() {
  const [open, setOpen] = React.useState(false)

  return (
    <ToastProvider swipeDirection="right">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Show Toast
      </Button>

      <Toast open={open} onOpenChange={setOpen}>
        <div className="flex flex-col gap-1">
          <ToastTitle>Scheduled: Catch up</ToastTitle>
          <ToastDescription>
            Friday, February 10, 2023 at 5:57 PM
          </ToastDescription>
        </div>
        <ToastAction altText="Undo scheduling">UNDO</ToastAction>
      </Toast>

      <ToastViewport />
    </ToastProvider>
  )
}

API Reference

Component	Description
ToastProvider	Wraps your app to provide toast context. Accepts swipeDirection ("right", "left", "up", "down").
Toast	The toast container. Accepts variant ("default" | "destructive"), open, onOpenChange, and duration (ms).
ToastTitle	An optional title for the toast.
ToastDescription	The toast message body.
ToastAction	An action button rendered inside the toast. Requires altText for accessibility.
ToastClose	A close button that dismisses the toast.
ToastViewport	The fixed container where toasts are rendered. Place at the end of your provider.

Accessibility

• Built on Radix UI Toast, which manages focus, keyboard navigation, and screen reader announcements automatically.
• ToastAction requires an altText prop describing the action for screen readers.
• Toasts are announced as polite live regions by default.
• Supports swipe-to-dismiss and keyboard dismiss via Escape.