Toast

A short message in a corner of the screen, on Sonner. Call toast() from anywhere; render <Toaster /> once.

Installation

npx rasengan-ui add toast

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/toast.json

It installs Button too.

Usage

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";
 
export function Invite() {
  return (
    <Button
      onClick={() =>
        toast("Invite sent", {
          description: "sakura@konoha.dev will get an email in a minute.",
          action: { label: "Undo", onClick: undo },
        })
      }
    >
      Send invite
    </Button>
  );
}

The Toaster

Render <Toaster /> once, near the root of the app, as this site does in its layout. It renders where it is placed (not in a portal), so inside a VillageScope it wears that scope's village.

import { Toaster } from "@/components/ui/toast";
 
export default function Layout({ children }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  );
}

Kinds

Sonner's API is unchanged: toast.success, toast.error, toast.info, toast.warning, toast.loading, and toast.promise(promise, { loading, success, error }), which follows a promise from its spinner to its result. toast.dismiss(id) closes one. Each kind wears its tone: success, info and warning theirs, error the destructive one; the icon takes it.

Soft

<Toaster variant="soft" /> also washes each typed toast in its tone, with its title in that colour. To try it here without touching the page's Toaster, this demo mounts a second one: <Toaster id="soft" />, which only shows the toasts sent with toasterId: "soft".

Villages

Sonner keeps its stacking, motion and swipe; the toast itself is a popover surface in the village (try the buttons above in each village). One Toaster for the page means the grid of villages is left out here.

Accessibility

• Toasts are announced through Sonner's aria-live="polite" region; Alt T moves focus to them.
• Each has a close button; one with an action stays long enough to use it, or pass duration: Infinity.
• Never put the only way to do something in a toast: it goes away.

API reference

toast is Sonner's. Toaster takes Sonner's props (position, duration, visibleToasts, expand, offset, id…), with closeButton on by default, plus variant ("default" \| "soft"); richColors, invert and theme have nothing to do, since the village draws the toast.