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="tertiary" onClick={showToast}>
			Show Toast
		</Button>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/toast.json

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="tertiary"
				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="tertiary" 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="tertiary" 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.