[ [UI.37] Feedback ] Toast

Toast

> A succinct message that is displayed temporarily at the top of the screen.

Import

[ [0x5B] IMPORT ]

1import { useToast } from "@/hooks/use-toast"
2import { Toaster } from "@/components/ui/toaster"

Preview

[ [0x00] TOAST ]

1const { toast } = useToast();
2
3<Button
4  onClick={() => {
5    toast({
6      title: "Notification",
7      description: "This is a toast notification.",
8    });
9  }}
10>
11  Show Toast
12</Button>

Variants

[ [0x00] SIMPLE TOAST ]

1toast({
2  description: "Your message has been sent.",
3});

[ [0x00] WITH TITLE ]

1toast({
2  title: "Success",
3  description: "Your changes have been saved.",
4});

[ [0x00] SUCCESS TOAST ]

1const { success } = useToast();
2success("Success", "Your changes have been saved.");

[ [0x00] ERROR TOAST ]

1const { error } = useToast();
2error("Error", "Something went wrong. Please try again.");

[ [0x00] WITH ACTION ]

1toast({
2  title: "Undo Available",
3  description: "File moved to trash.",
4  action: {
5    label: "Undo",
6    onClick: () => {},
7  },
8});

[ [0x00] INFO & WARNING ]

1const { info, warning } = useToast();
2
3// Info toast
4info("Info", "This is informational.");
5
6// Warning toast
7warning("Warning", "Please be careful.");

API Reference

[ [0x00] API REFERENCE ]

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.

Usage

[ [0x5D] SETUP ]

The toast system uses Sonner and is pre-configured in your layout.

1import { Toaster } from "sonner";
2
3export default function RootLayout({ children }) {
4  return (
5    <html>
6      <body>
7        {children}
8        <Toaster />
9      </body>
10    </html>
11  );
12}

[ [0xEF] BASIC USAGE ]

Use the toast hook in your components.

1import { useToast } from "@/hooks/use-toast";
2
3export function MyComponent() {
4  const { toast } = useToast();
5
6  return (
7    <Button
8      onClick={() => {
9        toast({
10          title: "Notification",
11          description: "Your action was successful.",
12        });
13      }}
14    >
15      Show Notification
16    </Button>
17  );
18}

[ [0xE3] ERROR HANDLING ]

Show error toasts in try-catch blocks.

1const { toast } = useToast();
2
3async 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}

Accessibility

[ [0x58] A11Y ]

Toasts are announced to screen readers
Automatically dismissed after duration expires
Can be manually dismissed with close button
Keyboard accessible close button
Proper ARIA roles and attributes
Focus management for action buttons

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Toast when:

• Providing temporary feedback for user actions (saved, deleted, copied)
• Non-critical notifications that don't require user decision
• Auto-dismiss is appropriate (3-5 seconds typical)
• Quick status updates (upload progress, background tasks)
• Undo actions with action button (delete with undo)

✗ Don't use when:

• Information must persist until user acknowledges (use Alert)
• User must make a decision (use Dialog or Alert Dialog)
• Critical errors requiring attention (use Alert with destructive variant)
• Complex information with multiple paragraphs (use Dialog)
• Form validation errors (show inline with error states)

Toast vs Alert:

• Toast: Temporary (auto-dismiss), action feedback, non-blocking
• Alert: Persistent (user dismisses), important info, inline in page
• Toast: "Item saved", "Copied to clipboard", "File uploaded"
• Alert: "Your session will expire in 10 minutes", "Email verification required"