Toaster
Stackable toast notifications with auto-dismiss, swipe gesture support, and theme synchronization.
On This Page
Stackable toast notifications with auto-dismiss, swipe gesture support, and theme synchronization.
Stackable toast notifications with auto-dismiss, swipe gesture support, and theme synchronization.
Add the <Toaster /> component once inside your root app/layout.tsx. You can then trigger toasts from any client component via toast().
| Prop | Type | Default | Description |
|---|---|---|---|
| position | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center' | 'bottom-right' | Placement of toasts on screen viewport. |
| expand | boolean | false | Whether toasts should expand to full width on hover or click. |
| duration | number | 4000 | Default display duration in milliseconds before dismiss. |
| visibleToasts | number | 3 | Maximum number of stacked toasts displayed concurrently. |
| closeButton | boolean | false | Render an explicit dismiss X button inside each toast. |
| richColors | boolean | false | Render enriched contrast badges for success/error states. |
aria-live="polite" region, preventing interruption of active screen reader tasks.