Snackbar

Best Practices

Keep it concise. Use short, direct messaging so users can absorb information at a glance.

Prioritize visibility. Snackbars should stand out against the background, yet remain visually subtle so they don’t dominate the interface.

Allow quick dismissal or expiration. In most cases, snackbars automatically disappear after a few seconds. If an immediate user decision is required, provide a clear “Dismiss” or “Undo” action.

Avoid stacking multiple snackbars. Showing more than one at a time can overwhelm people and obscure important context.

Style

Snackbars typically slide or fade in from the bottom, subtly catching attention without interrupting interaction:

Positioning. Anchored to the bottom of the view so users can see the main content and the snackbar simultaneously.

Color Contrast. Choose a background color that contrasts sufficiently with the text. For important alerts, consider slightly bolder colors while maintaining a balanced look.

Animation. A brief transition (e.g., slide up, then slide down) keeps the experience smooth and non-intrusive.

Content

The message in a snackbar should be straightforward and relevant to the user’s recent action or app state:

Concise Text. Typically one or two short lines explaining what occurred or what the user needs to know.

Optional Action Button. If a follow-up action (like “Undo” or “Retry”) is helpful, include a clearly labeled button. Keep the label short to preserve the snackbar’s minimal footprint.

Auto-Dismiss Timing. Time the auto-dismiss so users can read the message. Three to five seconds is common, though complex messages may need slightly longer.

Role

Snackbars serve as transient notifications or confirmations, helping users stay informed without requiring them to dismiss a modal or leave their current task:

Confirmation. Let users know an action was successful (e.g., “Item added to cart”).

Error Recovery. Offer quick fixes or retries for minor errors (e.g., “Couldn’t send. Retry?”).

Lightweight Updates. Provide status changes that don’t warrant a full alert dialog (e.g., “Settings saved”).