Toast
Displays short, temporary messages that confirm actions or provide system feedback without interrupting workflow.
Code
Installation
npx shadcn@latest add sonnerBasic Example
import { toast } from "@/components/ui/toast"
toast({
title: "Hello!",
description: "This is a toast notification.",
})Variants
import { toast, toastSuccess, toastDanger } from "@/components/ui/toast"
// Success toast
toastSuccess("Success!", "Operation completed")
// Danger toast
toastDanger("Error!", "Something went wrong")Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | ReactNode | — | Toast title (required) |
| description | string | — | Optional description text |
| variant | string | "default" | Toast variant. Options: default, success, danger |
| duration | number | 4000 | Duration in milliseconds |
Variants
Usage Guidelines
When to Use
Use toasts to provide feedback for user actions, show success messages, display errors, or communicate non-critical information. They appear temporarily and don't block user interaction.
Toasts are ideal for operations that don't require immediate user response. Use success toasts for positive feedback, danger toasts for errors, and default toasts for general information.
Best Practices
- Keep toast messages concise and actionable
- Use appropriate variants for the message type
- Set custom duration for important notifications
- Don't show too many toasts at once
- Use success for completed actions, danger for errors
Accessibility
Toasts should be announced to screen readers. Ensure toast messages are clear and descriptive. The toast component automatically handles focus management and ARIA announcements.
Consider using aria-live regions for important notifications. Ensure sufficient color contrast for all toast variants.