Docs
Toast
Toast
A production-grade toast notification component built on top of Sonner with theme-aware styling and comprehensive positioning options.
20 views
0 downloads
Loading...
Overview
The Toast component provides a comprehensive notification system with theme-aware styling, multiple positioning options, and rich customization capabilities. Built on top of Sonner, it offers a production-ready solution for displaying temporary messages to users.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/toast.json
Usage
1import Toast, { toast } from "@/registry/components/toast"23export default function App() {4 return (5 <div>6 <Toast />7 <button onClick={() => toast.success("Success!")}>Show Toast</button>8 </div>9 )10}
API Reference
Toast Component
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Position of the toast |
richColors | boolean | true | Enable rich colors for better visual hierarchy |
visibleToasts | number | 3 | Maximum number of toasts to show at once |
className | string | undefined | Custom class name for the toaster |
toastOptions | object | undefined | Custom styling and behavior options |
Toast Function
| Method | Description |
|---|---|
toast(message, options?) | Display a default toast |
toast.success(message, options?) | Display a success toast |
toast.error(message, options?) | Display an error toast |
toast.warning(message, options?) | Display a warning toast |
toast.info(message, options?) | Display an info toast |
toast.promise(promise, options) | Display a promise-based toast |
Toast Options
| Option | Type | Description |
|---|---|---|
duration | number | Duration in milliseconds |
description | string | Additional description text |
action | {label: string, onClick: () => void} | Action button configuration |
cancel | {label: string, onClick: () => void} | Cancel button configuration |
id | string | Custom toast ID |
onDismiss | () => void | Callback when toast is dismissed |
onAutoClose | () => void | Callback when toast auto-closes |
Examples
Basic Toast Types
Loading...
Positioning
Loading...
Action Buttons and Promises
Loading...
Custom Content and Styling
Loading...
Theme-Aware Colors
Loading...
Theme Integration
The Toast component automatically adapts to your theme using the same color system as the Admonition component:
- Success: Emerald colors (
emerald-50/emerald-950backgrounds) - Error: Red colors (
red-50/red-950backgrounds) - Warning: Amber colors (
amber-50/amber-950backgrounds) - Info: Blue colors (
blue-50/blue-950backgrounds) - Default: Gray colors (
gray-50/gray-950backgrounds)
Each color variant includes proper dark mode support with adjusted opacity and contrast ratios.
Best Practices
- Position: Use
bottom-rightfor general notifications,top-centerfor important system messages - Duration: Set appropriate durations - success messages can be shorter (2-3s), errors longer (5-8s)
- Actions: Include action buttons for recoverable errors or important confirmations
- Content: Keep messages concise and actionable
- Accessibility: Messages are automatically announced to screen readers
Accessibility
- Toast messages are announced to screen readers
- Supports keyboard navigation for action buttons
- Proper ARIA labeling for toast types
- Color contrast meets WCAG guidelines
- Respects prefers-reduced-motion settings
