Skip to content

Toast

A brief message about what just happened, often with Undo. Errors stay longer and are announced urgently. Coming from shadcn? This is the Sonner-style toast: the same toast.success() and toast.promise() calls, built on Base UI.

Sourcecomponents/toast.tsx

How they look

Brief saved

Link copied

Couldn’t save the brief

Check your connection and try again.

Brief archived

Try them

Saving from a dialog

Usage

Toast usage
import { Button } from "@/components/button";import { Toaster, toast } from "@/components/toast";
export function ToastUsage({ archive, restore }: { archive: () => void; restore: () => void }) {  // Render <Toaster /> once, near the root of the app.  return (    <>      <Button        onClick={() => {          archive();          toast.add({ title: "Brief archived", actionProps: { children: "Undo", onClick: restore } });        }}      >        Archive      </Button>      <Toaster />    </>  );}

When to use

Use when

Brief feedback after an action ("Saved", "Copied"), with Undo where it helps. Render <Toaster /> once; call toast anywhere

Don’t use when

Errors that block the user or anything they must act on (use Alert in the page or a Dialog); the only record of something important