Usage
Use a toast to give quick, passive feedback after the user completes an action, or if a background event has occurred. It confirms without interrupting — the user can keep working, and the toast fades away on its own. Since a toast disappears on its own, never put anything critical or irreversible behind it alone.
- Use for passive confirmation of a completed action.
- Keep the copy to a single, scannable line.
- Limit to one optional action, and make it low-stakes and reversible (e.g., Undo, View).
- Show one toast at a time, rather than stack.
- Let it dismiss automatically after a short interval.
- Don't use it to announce features or promote content.
- Don’t use a toast for critical errors or time-sensitive information.
- Don't require the user to act on it.
- Don't stack multiple toasts or show them in rapid succession.
- Don't overload with multiple actions, long copy, or wrapped text.
Usage comparison
|
Component |
Interruption |
Blocking |
Placement |
Key difference from Toast |
|---|---|---|---|---|
|
Toast |
Low |
No |
Floats above content, near the bottom of the screen |
– |
|
Alert |
High |
Yes |
Centered, overlays entire screen with scrim |
Interrupts and requires a response before continuing |
|
Banner |
Low |
No |
Anchored to bottom of screen |
Sits quietly in the flow – no response needed |
|
CFR |
Low |
No |
Anchored to a specific element it points at |
Educational, not confirmational; tied to a target UI element |
Design properties
| Property | Values | Default |
|---|---|---|
| ✏️ Message Text | string | Message |
| Show button Boolean | true | false | true |
Types
Message only
Just the message text. Use for pure confirmation where no follow-up is needed.
With action
Message and one inline text button. Use when a quick, optional follow-up is useful.
Behavior and interaction
- Auto-dismisses after a short interval. Because it's transient, never place must-see content here.
- The user can keep interacting with the screen while it’s visible.
- If an action is present, the inline button triggers a single related follow-up (e.g., undo). Tapping it typically dismisses the toast.
- The toast renders in the opposite of the active theme for contrast.
Positioning
- Overlays the interface near the bottom of the screen, above other content and any bottom toolbar or tab bar.
- Appears briefly, then animates out on its own.
- Content behind it stays fully interactive.
- Maintains safe-area insets so it never collides with the home indicator.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Sept 10, 2026 |
1.0.0 |
Initial draft of component guidance |