Toast

• Usage
• Variations

Usage

• Used as the primary method to communicate actions & feedback to the user. These can be success messages, error messages, warning messages, or informative messages.
• Toasts can stack, with the most recent at the bottom.
• Should auto-dismiss after a short amount of time.
• The default button text is Dismiss but it can be adapted to other uses. Button text should be short, ideally one word, and no more than three.
• Toasts should live in the bottom right corner of the screen to avoid covering up page content whenever possible.

Variantions

Primary

• icon
• text in a single line
• action button
  • default is dismiss
• colors: primary, warning, danger, success
• max width 720px

Secondary

• text in a single line
• action button
  • default is dismiss
• colors: primary, warning, danger, success
• max width 720px

Alternate

• text in a single line
• colors: primary, warning, danger, success
• max width 720px

Large

• can include icon
• can include action button
  • default is dismiss
• always includes text, which can wrap up to 3 lines max
• colors: primary
• max width 720px