Toast

Imperative notification system using Base UI Toast. Exports Toaster (mount once) and toast() (call anywhere). Supports default, success, warning, and destructive variants with optional action buttons.

Preview

Installation

bash

npx shadcn@latest add @layout/toast

Usage

tsx

import { Toaster, toast } from "@/components/ui/toast"

Examples

With action

Title only

Guidelines for AI agents

Mount <Toaster /> once in your root layout. Then call toast() imperatively from any client component or event handler. Use toast.success / toast.warning / toast.destructive for intent-specific variants. Provide an action for reversible operations (e.g. undo archive). Use toast.dismiss(id) for manual programmatic dismissal. Toasts auto-dismiss after 5 seconds by default; pass duration in ms to override.

Never

Neveruse toast for errors that require user input or decisions — use Dialog or AlertDialog
Neverstack more than 3 toasts; the queue hides older ones automatically
Nevermount Toaster more than once in the same React tree
Neveruse toast as the sole feedback for a destructive action; show AlertDialog first, toast after

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-md--layout-radius--layout-duration-base--layout-success--layout-warning--layout-danger