Toast

Transient, self-dismissing notification with a title, description, optional action, and a close (×) that slides in on hover. Use a Toast to confirm a background result (saved, sent, copied) or offer an Undo without interrupting the user. Reach for Alert instead when the message must stay pinned in the layout, or AlertDialog when you need a blocking decision before the user can continue. Variants: default for routine success/info confirmations; destructive only to surface a failure or error that warrants the red surface (e.g. a retry).

Setup

Wrap your app (or the section that fires toasts) in <ToastProvider> and render a single <ToastViewport /> somewhere it can stack fixed-position. Then control individual <Toast> open state from anywhere.

Default — hover to reveal close

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

Destructive

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

Live trigger

function Example() {
  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-1 flex-col gap-1">
          <ToastTitle>Scheduled: Catch up</ToastTitle>
          <ToastDescription>Friday, February 10, 2023 at 5:57 PM</ToastDescription>
        </div>
        <ToastAction altText="Undo">Undo</ToastAction>
        <ToastClose />
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}

Props

Component	Notable props
Toast	variant: "default" \| "destructive" (default "default"); open, onOpenChange, duration, …Radix Toast.Root
ToastAction	altText (required by Radix for screen readers); …button props. Defaults to outlined chrome.
ToastClose	Hidden by default; reveals on group-hover or focus-visible. No props beyond Radix Toast.Close.
ToastTitle / ToastDescription	Plain Radix slots. Title = font-medium; Description = opacity-90.
ToastProvider	swipeDirection ("right" by default), duration, label.
ToastViewport	Render once. Top-right on mobile, bottom-right on desktop by default.

Source

packages/react/src/components/toast.tsx · Figma node 164:1459