​​​🍄​Toasts

​
​Definition

​​Provide brief messages about application processes and can be a confirmation of some event.
​​There is NO action for a user.

​
​Visual Examples

​
​Usage

  • ​​Informs user of a process that an app has performed or will perform
  • ​​Should not interrupt experience
  • ​​Can stack

​
​Principles

​​Informational: provides updates on app process
​​Feedback: gives users feedback in response to actions they take

​
​Types

​
​Priority

​
​Low/Non-critical

​
​Behavior

  • ​​Appear sticky at the bottom of the page
  • ​​Temporary: appear and disappear on their own without user input required
  • ​​appear without warning
  • ​​disappear automatically after 4-10 seconds
  • ​​There is no CTA

​
​Atomic Model Identifications

​​Organism (can be placed without other UI elements)

​
​Recommendations

  • ​​Toasts should be used to inform a status change or update
  • ​​Ex. "User registration sent." "Permissions saved."
  • ​​Contain no actions
  • ​​Are temporary

​
​Dos and Don'ts

​
​Do
​​Use short and simple messaging that is related to a task a user has just performed.
​
​Don't
​​Do not include actions in your toast. If you find actions are necessary, use a snackbar as an alternative.

​
​Content

​
​Accessibility Requirements & Resources

​
​Accessibility:
  1. ​​Toasts should not acquire keyboard focus upon appearing.
  1. ​​Toasts should not contain long messages since they disappear automatically.

​
​Mountaineer Design System

​
​Related Components

​​
​​