Basic Toast
A simple text notification.
With Description
Add a secondary description line below the main message.
With Action
Include an action button for undo or other quick actions.
Semantic Variants
Use toast.success(), toast.error(), and other methods for semantic feedback.
Promise
Wrap an async operation with loading, success, and error states.
Props
| Prop | Type | Description |
|---|---|---|
| theme | "light" | "dark" | "system" | Color scheme (auto-detected from next-themes) |
| position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ... | Where toasts appear on screen |
| richColors | boolean | Enable rich semantic colors for success/error/etc. |
| expand | boolean | Expand all toasts by default |
| duration | number | Default duration in milliseconds |
| closeButton | boolean | Show close button on toasts |
Usage
import { Toaster } from "@/components/ui";
import { toast } from "sonner";
// Add <Toaster /> to your layout
<Toaster />
// Trigger toasts anywhere
toast("Event has been created.");
toast.success("Saved!");
toast.error("Something went wrong.");
toast("With action", {
action: { label: "Undo", onClick: () => {} },
});