Sonner
An opinionated toast component for React with beautiful defaults.
Installation
npm install sonnerUsage
1. Add the Toaster component to your app
1
2
3
4
5
6
7
8
9
10
11
12
13
// In your layout.tsx or root component
import { Toaster } from "sonner"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
)
}2. Use toast function to display notifications
1
2
3
4
5
6
7
8
9
10
11
12
13
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
export function ToastDemo() {
return (
<Button
variant="outline"
onClick={() => toast('Event has been created')}
>
Show Toast
</Button>
)
}Examples
Toast Types
Custom Toast Options
Toaster Customization
1
2
3
4
5
6
7
8
9
10
11
// Custom Toaster configuration
<Toaster
position="top-right"
richColors
theme="dark"
closeButton
toastOptions={{
duration: 3000,
className: "my-toast-class",
}}
/>Props
toast() Function Options
| Prop | Type | Description |
|---|---|---|
| description | string | Additional description text for the toast. |
| duration | number | Duration in milliseconds for the toast to remain visible. |
| icon | ReactNode | Custom icon to display in the toast. |
| action | { label: string, onClick: () => void } | Action button configuration for the toast. |
| cancel | { label: string, onClick?: () => void | Cancel button configuration. |
| dismissible | boolean | Whether the toast can be dismissed by clicking. |
| className | string | Custom CSS class for the toast. |
Toaster Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| position | string | 'bottom-right' | Position of toasts on the screen. |
| theme | 'light' | 'dark' | 'system' | 'system' | Color theme for the toasts. |
| richColors | boolean | false | Whether to use rich colors for different toast types. |
| closeButton | boolean | false | Whether to show a close button on toasts. |
| toastOptions | object | Default options for all toasts. | |
| offset | number | string | 32 | Offset from the edges of the screen. |
| expand | boolean | false | Whether toasts expand to fill the available width. |