All components
Feedback
Toast
Transient notifications that spring in from the corner. Fire them with useToast(); mount ToastProvider once.
Preview
Preview
light
dark
Code
const { toast } = useToast();
toast({ title: "Changes saved", tone: "ok" });Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
toast() | ({ title, tone }) => void | — | From useToast(); tone: neutral | ok | info | warn | danger. |
Usage
Do
- Use for brief confirmations and errors that don't need a decision.
Don't
- Put critical choices in a toast — use an Overlay instead.