Github

Sonner

PreviousNext

An opinionated toast component for React.

"use client";

import { toast } from "sonner";

import { Button } from "@/components/ui/button";

export function SonnerDemo() {
	return (
		<Button
			variant="tertiary"
			onClick={() =>
				toast("Event has been created", {
					description: "Sunday, December 03, 2023 at 9:00 AM",
					action: {
						label: "Undo",
						onClick: () => console.log("Undo"),
					},
				})
			}
		>
			Show Toast
		</Button>
	);
}

About

Sonner is built and maintained by emilkowalski.

Installation

Run the following command:

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

Add the Toaster component to your root layout.

app/layout.tsx
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

Usage

import { toast } from "sonner"
toast("Event has been created.")

Examples

Types

"use client";

import { toast } from "sonner";

import { Button } from "@/components/ui/button";

export function SonnerTypes() {
	return (
		<div className="flex flex-wrap gap-2">
			<Button
				variant="tertiary"
				onClick={() => toast("Event has been created")}
			>
				Default
			</Button>
			<Button
				variant="tertiary"
				className="text-success"
				onClick={() => toast.success("Event has been created")}
			>
				Success
			</Button>
			<Button
				variant="tertiary"
				className="text-primary"
				onClick={() =>
					toast.info("Be at the area 10 minutes before the event time")
				}
			>
				Info
			</Button>
			<Button
				variant="tertiary"
				className="text-warning"
				onClick={() =>
					toast.warning("Event start time cannot be earlier than 8am")
				}
			>
				Warning
			</Button>
			<Button
				variant="tertiary"
				className="text-destructive"
				onClick={() => toast.error("Event has not been created")}
			>
				Error
			</Button>
			<Button
				variant="tertiary"
				onClick={() => {
					toast.promise<{ name: string }>(
						() =>
							new Promise((resolve) =>
								setTimeout(() => resolve({ name: "Event" }), 2000),
							),
						{
							loading: "Loading...",
							success: (data) => `${data.name} has been created`,
							error: "Error",
						},
					);
				}}
			>
				Promise
			</Button>
		</div>
	);
}

Description

"use client";

import { toast } from "sonner";

import { Button } from "@/components/ui/button";

export function SonnerDescription() {
	return (
		<Button
			variant="tertiary"
			className="w-fit"
			onClick={() =>
				toast("Event has been created", {
					description: "Monday, January 3rd at 6:00pm",
				})
			}
		>
			Show Toast
		</Button>
	);
}

Position

Use the position option to change where toasts appear.

"use client";

import { toast } from "sonner";

import { Button } from "@/components/ui/button";

export function SonnerPosition() {
	return (
		<div className="flex flex-wrap justify-center gap-2">
			<Button
				variant="tertiary"
				onClick={() =>
					toast("Event has been created", { position: "top-left" })
				}
			>
				Top Left
			</Button>
			<Button
				variant="tertiary"
				onClick={() =>
					toast("Event has been created", { position: "top-center" })
				}
			>
				Top Center
			</Button>
			<Button
				variant="tertiary"
				onClick={() =>
					toast("Event has been created", { position: "top-right" })
				}
			>
				Top Right
			</Button>
			<Button
				variant="tertiary"
				onClick={() =>
					toast("Event has been created", { position: "bottom-left" })
				}
			>
				Bottom Left
			</Button>
			<Button
				variant="tertiary"
				onClick={() =>
					toast("Event has been created", { position: "bottom-center" })
				}
			>
				Bottom Center
			</Button>
			<Button
				variant="tertiary"
				onClick={() =>
					toast("Event has been created", { position: "bottom-right" })
				}
			>
				Bottom Right
			</Button>
		</div>
	);
}

API Reference

See the Sonner API Reference for more information.