Snackbar

Usage

Use the snackbar as a non-blocking notification that appears at the bottom of the screen to provide feedback about an operation or action. It’s meant to alert without interrupting the user’s primary task flow. Acorn’s snackbar includes multiple descriptor text lengths, and optional action links and dismiss / close icon buttons.

Avoid snackbars when:

• Information is important and persistent (use a banner).
• Information is critical and user must make a decision (use a dialog).
• The message is local to a UI element (use inline feedback).

Reference Material Design for general guidance when designing for Android.

Usage comparison

Design properties

Types

Single line text

1-line text, optional action button, optional dismiss button.

2-line text

2-lines text, optional action button, optional dismiss button.

Longer text

2+ lines text, optional action button, optional dismiss button.

Behavior and interaction

Configuration

Ephemeral & non-blocking

• Snackbars provide brief, contextual feedback about an action the user just took.
• They never block interaction with the underlying UI (the user must be able to continue their flow uninterrupted).

Short-lived (auto-dismiss)

• Snackbars automatically disappear after a brief duration.
• They should not persist or require dismissal. Use banner if persistence is needed.
• If a snackbar presents an action (e.g., Undo), the duration may be slightly longer to allow a reasonable interaction window.

Optional action

• Snackbars may include one optional action button.
• Actions should be non-critical, easily reversible, or lightweight (undo, retry, save, share).
• Avoid critical or irreversible actions—those require dialogs or banners.

Replacing, not stacking

• Only one snackbar should appear at a time (no stacking or carousels).
• A new snackbar replaces the previous one to avoid overwhelming the user.

User interaction during display

• The user should not lose access to screen controls. The snackbar overlays content but does not interfere with taps above it.
• Swiping may dismiss it when appropriate (platform-dependent), but this is optional.

Positioning

Default placement

• Appears at the bottom of the screen, above the system navigation or gesture area.
• On mobile, it is horizontally centered and constrained to a comfortable max-width to avoid edge-to-edge heaviness.

Responsive behavior

• On larger breakpoints, snackbars may sit above navigation bars, align to safe areas, or use wider layouts but still avoid stretching across the entire viewport. Snackbars use max_width_medium to cap the width at 600px.

Avoiding obstruction

• The snackbar must avoid covering core actions, especially floating action buttons (FABs), navigation rail items, or bottom app bars.
• Material 3 surfaces automatically elevate underlying components (like FABs) to remain visible if overlap is unavoidable.

Motion & transitions

• Snackbars may slide in from the bottom and fade out on dismissal.
• Animation should be fast and low-friction to reinforce their transient nature and prevent overemphasis.

Writing guidelines

TBD

Related components

Changelog