Toast

Displays a message to the user in a toast.

Docs
toast-demo.tsx
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/sonner"
 
export function ToastDemo() {
	return (
		<Button
			onClick={() =>
				toast("Your request has been sent", {
					description: "We'll get back to you as soon as possible",
				})
			}
		>
			Show Toast
		</Button>
	)
}

About

The Toast is built on top of sonner, which is created by @emilkowalski_.

Installation

Run the following command.

npx shadcn@latest add https://9ui.dev/r/sonner

Add Toaster to your app layout.

app/layout.tsx
import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<head />
			<body>
				<main>{children}</main>
				<Toaster />
			</body>
		</html>
	)
}

Usage

Imports
import { toast } from "sonner"
Toast
toast("Toast is working!")

Examples

Promise

toast-promise.tsx
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/sonner"
 
export function ToastPromise() {
	return (
		<Button
			onClick={() =>
				toast.promise(
					new Promise((resolve) => {
						setTimeout(() => {
							resolve("Request sent")
						}, 2000)
					}),
					{
						loading: "Sending request...",
						success: "Request sent",
					}
				)
			}
		>
			Show Toast
		</Button>
	)
}

Action

toast-action.tsx
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/sonner"
 
export function ToastAction() {
	return (
		<Button
			onClick={() =>
				toast("Your email has been sent", {
					description: "We'll get back to you as soon as possible",
					action: {
						label: "Unsend",
						onClick: () => toast.success("Email unsent"),
					},
				})
			}
		>
			Show Toast
		</Button>
	)
}

Rich Colors

toast-rich-colors.tsx
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/sonner"
 
export function ToastRichColors() {
	return (
		<div className="grid grid-cols-2 gap-2">
			<Button
				onClick={() =>
					toast.success("Success", { richColors: true, duration: 60000 })
				}
			>
				success
			</Button>
			<Button
				onClick={() =>
					toast.error("Error", { richColors: true, duration: 60000 })
				}
			>
				error
			</Button>
			<Button
				onClick={() =>
					toast.warning("Warning", { richColors: true, duration: 60000 })
				}
			>
				warning
			</Button>
			<Button
				onClick={() =>
					toast.info("Info", { richColors: true, duration: 60000 })
				}
			>
				info
			</Button>
		</div>
	)
}