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

Name
Type
Default
Required
string | React.Node
-

Use string for guide toasts (one line of text) and React.Node for confirmation toasts (complex text, potentially containing a Link). Do not specify a Text color within this property, as the color is automatically determined based on the variant.

React.Node
-
React.Node
-
"circle" | "rectangle" | "square"
"square"
"default" | "error"
"default"

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!
Modern ceramic vase pin.
Section created!
Modern ceramic vase pin.
Section created!
Saved to Home decor
Saved to Home decor
Modern ceramic vase pin.
Saved to Home decor
Modern ceramic vase pin.
Saved to Home decor

Combinations: Thumbnail shapes

Blush and sage plant print.
Saved to Home decor
Blush and sage plant print.
Saved to Home decor
Blush and sage plant print.
Saved to Home decor