Toast

"use client";
import { Button } from "@/components/ui/button";import { toast } from "@/components/ui/toast";
export function ToastDemo() {	function showToast() {		const id = toast.add({			title: "Event created",			description: "Sunday, December 3 at 9:00 AM",			actionProps: {				children: "Undo",				onClick() {					toast.close(id);				},			},		});	}
	return (		<Button variant="secondary" onClick={showToast}>			Show Toast		</Button>	);}

Installation

pnpm dlx shadcn@latest add @herocn/toast

Usage

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

toast.add({  title: "Event created",  description: "Sunday, December 3 at 9:00 AM",})

Composition

Use the following composition to build a Toast:

Toaster├── ToastProvider│   └── ToastPortal│       └── ToastViewport│           └── ToastList│               └── Toast│                   ├── ToastContent│                   │   ├── ToastTitle│                   │   └── ToastDescription│                   ├── ToastAction│                   └── ToastClose

Toaster mounts the toast manager, portal, viewport, and list for you. The lower-level parts (ToastProvider, ToastPortal, ToastViewport, Toast, ToastContent, ToastTitle, ToastDescription, ToastAction, and ToastClose) are also exported for building custom toast layouts.

Examples

Types

Set the type option to render a status icon. The built-in renderer recognizes success, info, warning, error, and loading.

"use client";
import { Button } from "@/components/ui/button";import { toast } from "@/components/ui/toast";
export function ToastTypes() {	return (		<div className="flex flex-wrap gap-2">			<Button				variant="secondary"				onClick={() => toast.add({ title: "Event has been created." })}			>				Default			</Button>			<Button				variant="tertiary"				className="text-success-soft-foreground"				onClick={() =>					toast.add({						type: "success",						title: "Event has been created.",					})				}			>				Success			</Button>			<Button				variant="tertiary"				className="text-primary-soft-foreground"				onClick={() =>					toast.add({						type: "info",						title: "Arrive 10 minutes before the event.",					})				}			>				Info			</Button>			<Button				variant="tertiary"				className="text-warning-soft-foreground"				onClick={() =>					toast.add({						type: "warning",						title: "The event cannot start before 8:00 AM.",					})				}			>				Warning			</Button>			<Button				variant="destructive-soft"				onClick={() =>					toast.add({						type: "error",						title: "The event could not be created.",						priority: "high",					})				}			>				Error			</Button>		</div>	);}

Action

Pass button props with actionProps to render an action.

"use client";
import { Button } from "@/components/ui/button";import { toast } from "@/components/ui/toast";
export function ToastAction() {	function showToast() {		const id = toast.add({			title: "Event created",			description: "Sunday, December 3 at 9:00 AM",			actionProps: {				children: "Undo",				onClick() {					toast.close(id);				},			},		});	}
	return (		<Button variant="secondary" onClick={showToast}>			Show Toast		</Button>	);}

const id = toast.add({  title: "Event created",  actionProps: {    children: "Undo",    onClick() {      toast.close(id)    },  },})

Promise

Use toast.promise to update one toast as an asynchronous task moves through loading, success, and error states.

"use client";
import { Button } from "@/components/ui/button";import { toast } from "@/components/ui/toast";
export function ToastPromise() {	function showToast() {		toast.promise(			new Promise<{ name: string }>((resolve) => {				window.setTimeout(() => resolve({ name: "Event" }), 2000);			}),			{				loading: "Creating event…",				success: (data) => `${data.name} created.`,				error: "Could not create event.",			},		);	}
	return (		<Button variant="secondary" onClick={showToast}>			Create Event		</Button>	);}

API Reference

See the Base UI Toast documentation for details about manager options, stacking, swipe dismissal, and the primitive API.