<?xml version="1.0" encoding="utf-8"?>

Snackbars

Snackbars are non-modal notifications that appear for a short duration on the screen, informing users of system status updates or changes. In contrast to modal dialogs, snackbars don't interrupt user flow. They can be dismissed by an off-screen swipe or automatically disappear on their own (after a minimum of 4 and a maximum of 10 seconds) or after user interaction elsewhere. Snackbars can also contain other actions like Undo or Cancel.

Visually, snackbars represent a rectangular container with a short text label inside and optional actions. Snackbars should be readable and noticeable enough so users won't miss them when they need to undo an action before it's too late. The best way to do this is to use contrasting text and background colors.

Additionally, ensure snackbars appear at the bottom of the screen and don't block any navigational components.

Pro Tip: Multiple snackbars should follow each other, instead of stacking on top of each other and cluttering the screen.[1]

Improve your UX & Product skills with interactive courses that actually work