Components / Feedback
Toast
stableA brief, transient confirmation that an action succeeded — appears, then disappears on its own or is dismissed.
Try it
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'success' | 'error' | 'info' | 'info' | No | Colour and icon. |
message | string | — | Yes | The confirmation text. |
onDismiss | () => void | — | No | Called when the dismiss button is clicked. Omit to hide the button. |
Do
- Use for confirming an action the user just took ("Changes saved").
- Keep the message to one short sentence.
- Always include a dismiss control even if it also auto-dismisses.
Don't
- Use a Toast for anything that requires a decision — that needs a Modal or inline Alert instead.
- Show more than one Toast at a time in a way that makes them overlap.