Snackbar
A snackbar is a lightweight, non-intrusive message bar that appears at the bottom of the screen (especially in mobile or Material Design contexts) to provide brief notifications or updates. Unlike a toast (often displayed in the corner), a snackbar is more horizontally oriented and can optionally include a single action button (e.g., “Undo,” “Retry”) for quick follow-up. Snackbars are commonly used to confirm user actions or alert users to minor system events without obstructing their workflow.
Usage
Timely Feedback: Display results immediately following an action or system event.
Subtle & Contextual: Appearing at the bottom keeps the message visible yet out of the main work area, allowing users to continue their tasks.
Optional Action: A single action button (e.g., “Undo,” “Dismiss,” “Retry”) may offer users a quick remedy or reversal.
Use cases
Confirming a user action (“Email sent” with an “Undo” option)
Alerting minor errors or warnings (“No internet connection” with a “Retry” action)
Providing short, contextual updates (“Profile saved,” “Item added to cart”)
Not to be confused with
Toast: Toasts often appear in the top or corner of the screen. Snackbars appear at the bottom.
Banner: A banner is a persistent bar at the top or bottom, often requiring a manual dismissal. A snackbar auto-dismisses after a short interval (though it can also be swiped away).
Modal/Dialog: A dialog blocks the user’s interaction until closed. A snackbar is non-blocking and overlays only a small portion of the screen.
Best practices
Keep It Brief
Snackbars should display concise messages (one or two lines at most) so users can read them quickly before they disappear.
Set Appropriate Duration
Typically visible for 2–5 seconds.
Consider extending the duration if an action button is provided, giving users time to react.
Always allow manual dismissal (e.g., swiping away) for user control.
Optional Action Button
Provide a single, clear action (e.g., “Undo,” “Retry”) when relevant.
If the action is non-essential, keep it as a snack-only message or rely on secondary means to revert or address the situation.
Non-Blocking Placement
Position snackbars at the bottom of the screen (material-like design).
Ensure they don’t obscure critical UI elements like navigation or important buttons—allow for slight push-up if necessary.
Accessibility
Mark the snackbar container with a polite or assertive ARIA live region (aria-live="polite" or assertive) depending on urgency.
Provide sufficient color contrast for text and background.
If an action button is included, make sure it’s keyboard-focusable (e.g., Tab key).
Consistent Styling
Align the snackbar’s color scheme, typography, and corner radius with your design system.
Use subtle animations (fade/slide in, slide out) to keep transitions smooth.
Manage Multiple Snackbars
If several snackbars trigger at once, queue them or show only the most recent. Overlapping snackbars can be confusing.
Avoid displaying too many snackbars in rapid succession.
Use snackbars for non-critical messages and minor alerts. If the message is urgent or requires immediate user action, consider a more prominent component (e.g., dialog).
Summary
A snackbar is a discreet, bottom-screen notification that briefly displays informational updates or minor alerts. It can include a single action (like “Undo”) to let users quickly address or revert an operation. By keeping the message short, timing it properly, and providing consistent, accessible styling, snackbars effectively communicate non-critical events without impeding the user’s primary tasks.
