Toast
Temporary notification messages that provide feedback to users.
toast-01
Loading...
"use client"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"
export function ToastTypes() {
return (
<div className="flex flex-wrap gap-2">
<Button
variant="outline"
onClick={() => toast.add({ description: "Event has been created." })}
>
Default
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "success",
description: "Event has been created.",
})
}
>
Success
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "info",
description: "Arrive 10 minutes before the event.",
})
}
>
Info
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "warning",
description: "The event cannot start before 8:00 AM.",
})
}
>
Warning
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "error",
description: "The event could not be created.",
priority: "high",
})
}
>
Error
</Button>
</div>
)
}toast-02
Loading...
"use client"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"
export function ToastTypes() {
return (
<div className="flex flex-wrap gap-2">
<Button
variant="outline"
onClick={() => toast.add({ description: "Event has been created." })}
>
Default
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "success",
description: "Event has been created.",
})
}
>
Success
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "info",
description: "Arrive 10 minutes before the event.",
})
}
>
Info
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "warning",
description: "The event cannot start before 8:00 AM.",
})
}
>
Warning
</Button>
<Button
variant="outline"
onClick={() =>
toast.add({
type: "error",
description: "The event could not be created.",
priority: "high",
})
}
>
Error
</Button>
</div>
)
}Categories
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Dialog
- Drawer
- Dropdown Menu
- Field
- Hover Card
- Input
- Input OTP
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip