Toast
A succinct message that is displayed temporarily using Sonner.
Installation
// Add Toaster to your layout
import { Toaster } from "@sourceful-energy/ui"
// In your layout.tsx
<Toaster />
// Use toast function in components
import { toast } from "sonner"Usage
Examples
Success
Error
Warning
Info
With Description
With Action
Promise Toast
Custom Duration
Dismiss Toast
Props (Toaster)
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | The position of the toasts. |
| expand | boolean | false | Whether toasts should expand to fill available space. |
| richColors | boolean | false | Use rich colors for success, error, etc. |
| closeButton | boolean | false | Show a close button on each toast. |
| duration | number | 4000 | Default duration in milliseconds before toasts dismiss. |
Accessibility
- Uses ARIA live regions for screen reader announcements
- Toasts can be dismissed with keyboard
- Action buttons are keyboard accessible
- Respects prefers-reduced-motion for animations