Toast

• Design
• Implementation

#​When should it be used

A toast should be used to alert the customer when:

• The system returns an error or when an error may occur if the user takes an action / does not take an action. The error variant is shown in this case.
• It’s important to provide feedback to the user that something successful happened. The success variant is shown in this case.
• It’s important to provide information to the user. The info variant is shown in this case.

#​Can the user interact with the component?

No: this component (in component-library, excluding dismissible variants in dash) is shown for a duration of time and is not interactable.

#​How should the component be used?

• Providing inline feedback for an action performed.
• Write in complete sentences
• Limit sentences to ___ characters
• Underline links
• Left-align
• Have toasts persist rather than disappear
• Display directly above or inline to related content/actions

#​When should the component NOT be used?

• Show multiple toasts in the same location at the same time
• Use exclamation points for Error and Info toasts
• Change font size or color
• Rely on the color of the toast to indicate positive or negative meaning
• Use as form input feedback