🍄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