Toast

Sonner-powered toast notifications with Lucide icons, positioning, and auto-dismiss.

Preview

Installation

npx drivn add toast

Usage

Place Toaster in your layout, then call toast() anywhere.

1 import { toast, Toaster } from "@/components/ui/toast"
2 
3 export default function Page() {
4   return (
5     <div>
6       <button onClick={() => toast("Changes saved")}>
7         Default
8       </button>
9       <button onClick={() => toast.success("Published!")}>
10         Success
11       </button>
12       <button onClick={() => toast.error("Something went wrong")}>
13         Error
14       </button>
15       <Toaster />
16     </div>
17   )
18 }

Positioning

Action Button

Add an action button to the toast.

1 // Toast with action button
2 toast.success("File deleted", {
3   action: {
4     label: "Undo",
5     onClick: () => restoreFile(),
6   },
7 })

API Reference

toast()

Prop	Type	Default	Description
`title`	string	—	Main text of the toast notification (first argument)
`description`	string	—	Optional secondary text below the title
`action`	{ label: string; onClick: () => void }	—	Optional action button displayed in the toast
`duration`	number	4000	Time in ms before the toast auto-dismisses

Toaster

Prop	Type	Default	Description
`position`	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Position of the toast container on screen
`icons`	{ success?: ReactNode; error?: ReactNode; info?: ReactNode; warning?: ReactNode; loading?: ReactNode }	—	Custom icons for each toast variant. Pre-configured with Lucide icons.
`duration`	number	4000	Default duration for all toasts in milliseconds
`richColors`	boolean	false	Enable colored backgrounds matching toast variant
`closeButton`	boolean	false	Show a close button on each toast
`expand`	boolean	false	Expand all toasts by default instead of stacking
`visibleToasts`	number	3	Maximum number of toasts visible at once

1	import { toast, Toaster } from "@/components/ui/toast"
2
3	export default function Page() {
4	return (
5	<div>
6	<button onClick={() => toast("Changes saved")}>
7	Default
8	</button>
9	<button onClick={() => toast.success("Published!")}>
10	Success
11	</button>
12	<button onClick={() => toast.error("Something went wrong")}>
13	Error
14	</button>
15	<Toaster />
16	</div>
17	)
18	}

1	// Toast with action button
2	toast.success("File deleted", {
3	action: {
4	label: "Undo",
5	onClick: () => restoreFile(),
6	},
7	})