Toast
BetaBatch C. A short message about something that just happened. It appears at the bottom of the screen.
When to use
Use to confirm a finished action, briefly. Add undo when you can.
When not to use
Don't use for errors people must fix or for anything they need to read later; show the message next to the problem.
Anatomy
- Icon for the tone (not on neutral)
- Title
- Description (optional)
- Action, such as Undo (optional)
- Dismiss button
Variants
| Tone | Icon | Stays |
|---|---|---|
| neutral | None | 6 seconds |
| positive | Check | 6 seconds |
| info | Info | 6 seconds |
| negative | Alert | Until dismissed |
States
Appearing, shown, paused while the pointer is over it or it has focus, and leaving. At most 3 show at once. Open states are not shown as pictures: forcing a popup open hides the rest of the page from screen readers. Try them in the live example on the Code tab.