Toast

Feedback

Temporary notification messages that appear and auto-dismiss. Use toasts for non-blocking feedback about completed actions or background events.

Import

import { Toast, ToastProvider, useToast } from "@/components/ui/toast";

Click buttons to trigger different toast variants

Static preview of toast styles

Default

This is a default toast message

Success

Your changes have been saved

Error

Something went wrong

Warning

Please review before continuing

Info

New features available

Toast with an action button

File uploaded

Your file has been uploaded successfully

variant"default"

"default" | "success" | "error" | "warning" | "info"

Visual style of the toast

title—

string

Title text for the toast

description—

string

Description text for the toast

duration5000

number

Time in ms before auto-dismiss (0 = never)

action—

ReactNode

Optional action button

Prop	Type	Default	Description
`variant`	`"default" \| "success" \| "error" \| "warning" \| "info"`	"default"	Visual style of the toast
`title`	`string`	—	Title text for the toast
`description`	`string`	—	Description text for the toast
`duration`	`number`	5000	Time in ms before auto-dismiss (0 = never)
`action`	`ReactNode`	—	Optional action button