Usage
Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.
Best practices
Do
Use a toast to confirm an action taken by the user.
Do
Use the error variant exclusively for systemic errors (for example, no internet connection or error connecting to the database). In other scenarios, the error message needs to go in context, so use patterns embedded in other components.
Do
Use a toast for temporary status updates.
Don't
Do not rely on toasts to be seen, as they are temporary. Keep them short, and do not use them for critical messages.
Do
Use icons for affordance clarity or to highlight the nature of the toast message.
Don't
Don’t use icons for decorative purposes, or that don’t portray the meaning of the toast. In those cases might be better to use text only.
Examples
Live Preview
Props
Fetching props...
Events
Fetching events...