Toast

A succinct message that is displayed temporarily.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/toast.json

Usage

Wrap the app (or a surface) with Toaster, then call toast.add() from the shared manager.

import { Button } from "@/components/button/button";
import { toast, Toaster } from "@/components/toast/toast";

export function Example() {
  return (
    <Toaster>
      <Button
        variant="outline"
        onClick={() =>
          toast.add({
            title: "Event created",
            description: "Friday, February 10, 2023 at 5:57 PM",
          })
        }
      >
        Show Toast
      </Button>
    </Toaster>
  );
}

Pass type as success, info, warning, error, or loading for icons. Use actionProps for an action button, and toast.promise() for async feedback. Built on Base UI Toast.