Toast

Global notification system for system events and user feedback, powered by Sonner.

Preview & Interactive Laboratory

Semantic Indicators

Complex Interactivity

Actionable Toast

Promise Resolution

Custom Content

Usage & Implementation

import { toast } from "sonner"

// Basic
toast("Message")

// Status
toast.success("Completed")
toast.error("Failed")

// With Action
toast("Verify Account", {
  action: { label: "Verify", onClick: () => console.log("Verified") }
})

React / Tailwind

Granular Customization

Global Config

Set position and styling in the root layout.

className={`Toaster position='top-right'`}

Theme

Adapts to light/dark modes automatically.

className={`richColors closeButton`}

Custom Style

Override variables for premium glass looks.

className={`glass shadow-xl shadow-primary/5`}

API Reference (Props)

Prop	Type	Default	Description
description	string	-	Secondary text below the title.
action	object	-	Action button with label and onClick.
duration	number	4000	Visibility time in ms.
promise	function	-	Handle async states automatically.