Loading...
Loading...
> A succinct message that is displayed temporarily at the top of the screen.
1import { useToast } from "@/hooks/use-toast"2import { Toaster } from "@/components/ui/toaster"
1const { toast } = useToast();23<Button4 onClick={() => {5 toast({6 title: "Notification",7 description: "This is a toast notification.",8 });9 }}10>11 Show Toast12</Button>
1toast({2 description: "Your message has been sent.",3});
1toast({2 title: "Success",3 description: "Your changes have been saved.",4});
1const { success } = useToast();2success("Success", "Your changes have been saved.");
1const { error } = useToast();2error("Error", "Something went wrong. Please try again.");
1toast({2 title: "Undo Available",3 description: "File moved to trash.",4 action: {5 label: "Undo",6 onClick: () => {},7 },8});
1const { info, warning } = useToast();23// Info toast4info("Info", "This is informational.");56// Warning toast7warning("Warning", "Please be careful.");
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The title of the toast (optional). |
| description | string | - | The description text for the toast. |
| action | { label: string; onClick: () => void } | - | Optional action button configuration. |
| success | (title: string, description?: string) => void | - | Show a success toast notification. |
| error | (title: string, description?: string) => void | - | Show an error toast notification. |
| info | (title: string, description?: string) => void | - | Show an info toast notification. |
| warning | (title: string, description?: string) => void | - | Show a warning toast notification. |
| dismiss | (toastId?: string | number) => void | - | Dismiss a specific toast or all toasts if no ID provided. |
The toast system uses Sonner and is pre-configured in your layout.
1import { Toaster } from "sonner";23export default function RootLayout({ children }) {4 return (5 <html>6 <body>7 {children}8 <Toaster />9 </body>10 </html>11 );12}
Use the toast hook in your components.
1import { useToast } from "@/hooks/use-toast";23export function MyComponent() {4 const { toast } = useToast();56 return (7 <Button8 onClick={() => {9 toast({10 title: "Notification",11 description: "Your action was successful.",12 });13 }}14 >15 Show Notification16 </Button>17 );18}
Show error toasts in try-catch blocks.
1const { toast } = useToast();23async function handleSubmit() {4 try {5 await saveData();6 toast({7 title: "Success",8 description: "Data saved successfully.",9 });10 } catch (_) {11 toast({12 variant: "destructive",13 title: "Error",14 description: "Failed to save data.",15 });16 }17}
✓ Use Toast when:
✗ Don't use when:
Toast vs Alert: