Toast

Transient notification with a title, description, action button, and a close (×) that slides in on hover. Built on Radix Toast.

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