​​​🍄​Snackbars

​
​Definition

​​Provide brief messages about application processes with a CTA. There's ALWAYS an action for a user in a snackbar. 

​
​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
​​Interactive: allows for user interactions to dismiss or take further action

​
​Types

​​Similar to a toast, but more versatile and customizable with actions and interactive by nature

​
​Priority

​
​Low/Non-critical

​
​Behavior

  • ​​Appear sticky at the bottom of the page
  • ​​Actions for users to take

​
​Atomic Model Identification

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

​
​Recommendations

  • ​​Snackbars should be used when there are actions available
  • ​​Ex. "Report generated, click to view." "Ticket needs your attention, click to view."
  • ​​Contain actions and a close button
  • ​​Interactive and persist until action taken
  • ​​Appear at the bottom of the screen 

​
​Dos and Don'ts

​
​Do
​​Use elevation and a dark background so that snackbars are easily identified.
​​
​
​Don't
​​Do not alter the shape of the snackbar container.

​
​Content

  • ​​Content
  • ​​Content
  • ​​Content

​
​Accessibility Requirements & Resources

  1. ​​Toasts should not acquire keyboard focus upon appearing.
  1. ​​Toasts should not contain long messages since they disappear automatically.
  1. ​​Screen readers do not interact with toasts, but can interact with snackbar actions.

​
​Mountaineer Design System Link

​
​Related Components

​​
​​