Toast
NewoverlaySlide-in notification from bottom-right with auto-dismiss, progress bar, and success/error/warning variants.
import { useToast } from '@/components/forge'Preview
Toast
Saved
Your component preference was updated.
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | - | Yes | Main toast message |
description | string | - | No | Optional subtext |
variant | 'default' | 'success' | 'error' | 'warning' | 'default' | No | Color and icon variant |
duration | number | 4000 | No | Auto-dismiss duration in ms |
Variants
defaultsuccesserrorwarning
Accessibility
- Toast container has role="region" and aria-label="Notifications"
- Each toast has role="alert" for live region announcements
- Auto-dismiss pauses on focus/hover