Component · Feedback · 18
Toast
Toast = a temporary message pinned to a screen edge that clears on a timer and never blocks the page.
What is a Toast?
A toast is a brief confirmation. Give corner, duration, and success versus error color.
Variants
Tap a property to highlight it in the preview.
- A positive confirmation toast (saved, sent, copied).
- The invalid state — red border, message, and usually a blocked submit.
- The corner roundness of the toast.
- How long the toast stays before auto-dismissing, in ms or s.
- A button whose content is a single glyph with no text label. Always give it an aria-label.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- A positive confirmation toast (saved, sent, copied).
- The invalid state — red border, message, and usually a blocked submit.
Anatomy
These are the parts to name in your prompt.
- 01 Icon
- 02 Message
- 03 Container
When to use
- Confirming an action the user just took — copied, saved, sent
- Background task results
- Errors that need no blocking
Avoid when
- Messages that need a decision — use a Modal
- Long error explanations — use inline error text
- More than 3 stacked toasts
See also
Create a toast notification.
STYLE
- bottom-right, 12px radius, 4s auto dismiss
STATES
- success mint, error red
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui