Toast
Toasts can educate people on the content of the screen, provide confirmation when people complete an action, or simply communicate a short message.
The Toast component is purely visual. In order to properly handle the showing and dismissing of Toasts, as well as any animations, you will need to implement a Toast manager.
Props
Usage guidelines
When to Use
- Displaying non-critical feedback on the result of an action.
- Reinforcing success at the surface level.
When Not to Use
- Providing an update related to anything other than confirmation of a successful action. Consider a Callout instead.
- Presenting mandatory and/or critical actions to a user.
- Displaying feedback at the element level (e.g., password inputted doesn't meet requirements). Use inline text instead.
Example: Simple Text
Example: Complex Text
When passing in your own Text component for text
, do not specify color
on Text. Toast will automatically pick the correct text color for the given variant
.
Example: Error variant
Example: Image + Text
Example: Image + Text + Button
Combinations: Overview
Section created!
Section created!
Section created!
Section created!
Saved to Home decor
Saved to Home decor
Saved to Home decor
Saved to Home decor