Toast notificationsbeta
beta
Toast notification is a floating box on the bottom left that presents timely information, including confirmation of actions, alerts, and errors.
1. Alike components
Toast notification is often confused with dialog and inline notice in some use cases. The guidance below helps to differentiate the difference.
| Toast notification | Dialog | Inline notice | |
|---|---|---|---|
| Intention | Informational | Requiring a choice | Informational |
| Placement | Floating, bottom left | Floating, centered | Inline |
| Interruptive (blocking users from taking other actions) | No | Yes | No |
| Self destructive | Yes | No | No |
| Dismissible | Yes | Yes | No |
1.2 Toast notification vs dialog
Don't
Don’t use toast notification if a user input is required to proceed. Write error message inline with the form.
Do
Use toast notification as feedback. The action should be optional for users.
Contents