Toast
FeedbackQueued notifications rendered into a portal viewport. Per-variant semantics: polite status for informational, assertive alert for danger. Auto-dismiss with manual escape hatch.
import { ToastProvider, useToast } from "@componentforge/react";
Examples
Variants & action buttons
Danger toasts are announced assertively and support duration={Infinity}.
Accessibility
- Viewport is role="region" aria-label="Notifications"; each toast is role="status" (or role="alert" for danger).
- duration={Infinity} opts out of auto-dismiss for critical messages.
- Dismiss buttons carry explicit aria-labels.
Keyboard interactions
| Key | Action |
|---|---|
| Tab → Enter | Reach and activate action/dismiss buttons. |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| toast({ title, description, variant, duration, action }) | ToastOptions | duration 5000ms | Returns an id you can pass to dismiss(). |
| variant | "default" | "success" | "warning" | "danger" | "info" | "default" | Accent + semantics. |