A toast notification component for displaying brief messages.
Default toast notification.
import { Toaster } from "@/components/ui/sonner"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
export function ToastDemo() {
return (
<>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 21st at 4:30PM",
})
}
>
Show Toast
</Button>
<Toaster />
</>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
| position | top-left | top-right | bottom-left | bottom-right | top-center | bottom-center | bottom-right | Position of the toast. |
| closeButton | boolean | false | Whether to show a close button. |
| richColors | boolean | false | Whether to use rich colors for the toast. |
| expand | boolean | false | Whether to expand the toast to fill the width. |