​​​🍄​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

​​
 
User-uploaded image: Screen+Shot+2021-03-12+at+10.08.05+AM.png
​​

​​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

​​https://www.figma.com/file/XbSxsYfvX17wGgArPxK22f/%F0%9F%8F%94-Mountaineer-Design-System?node-id=1179%3A6367

​​Related Components

​​
 
User-uploaded image: Toast+v.+Snackbar.png
​​
​​
​​