Toast
Brief confirmation that appears over the page and dismisses itself. Keep it to one line and offer an action like Undo when it helps.
Types
Neutral, Success, Error. Uses Shadow/L.
Project archived
Changes published
Upload failed
<Toast action={{ label: "Undo", onClick: undo }} onClose={close}>Project archived</Toast>Try it
Toasts appear at the bottom of the screen.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "neutral" | "success" | "error" | "neutral" | Meaning. |
children | ReactNode | — | Message. |
action | { label, onClick } | — | Optional action such as Undo. |
onClose | () => void | — | Shows a close button when set. |
Usage
Do
- Keep to one line.
- Offer Undo for reversible actions.
Don't
- Put critical errors only in a toast.