Live demo — click to trigger
Toasts appear bottom-right · click to dismiss · auto-dismiss after 4s
All tones
Static reference — all 5 tones (rendered inline)
✓Campaign published.×
✕Upload failed.×
!Trial expires in 3 days.×
iSync completed for 3 accounts.×
▸Deploy queued for 02:00 UTC.×
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ToastProvider | Component | — | Wrap your app root. Renders the fixed toast stack and provides context. |
| useToast() | Hook → { toast, dismiss } | — | Returns toast() and dismiss() functions. Must be called inside ToastProvider. |
| toast({ message }) | Function | — | Fires a toast. Returns id for programmatic dismiss. |
| toast.tone | "success"|"error"|"warning"|"info"|"dark" | "dark" | Visual tone — sets background, foreground, and icon glyph. |
| toast.duration | number (ms) | 4000 | Auto-dismiss delay. Pass 0 for persistent (manual dismiss only). |
| dismiss(id) | Function | — | Programmatically dismiss a toast by its returned id. |
Usage
// 1. Wrap your app
import { ToastProvider } from "components/feedback/Toast";
<ToastProvider><App /></ToastProvider>
// 2. Use anywhere inside
import { useToast } from "components/feedback/Toast";
const { toast } = useToast();
toast({ message: "Saved!", tone: "success" });
toast({ message: "Check your input.", tone: "error", duration: 6000 });
toast({ message: "Deploying…", tone: "dark", duration: 0 }); // persistent