Banner

Usage

The banner is a persistent, non-modal notification used to surface important, product-level information without interrupting the user’s current task. It presents a concise message with one or two available actions and stays visible until the user either addresses the issue or explicitly dismisses it.

Unlike snackbars, banners don’t auto-expire. And, unlike dialogs, they don’t block interaction with the rest of the interface. They sit at the top of the content area on mobile and serve as a medium-friction way to highlight account, subscription, or system-wide issues where user attention is needed soon, but immediate action isn’t mandatory.

Use a banner when:

• The message is important and or time-sensitive, but not a critical error or destructive decision.
• The information is global or cross-screen in effect:
• Account, subscription, or system-wide state.
• Legal, compliance, or feature-availability messages.
• You want to offer one or more actions but allow the user to:
• Continue their current task.
• Make a decision later without losing context.

Avoid a banner when:

• The action is mandatory to proceed (use a dialog).
• The message is transient feedback to a completed action (use a snackbar).
• The content is local to a specific control or field (consider snackbar).

Reference Material Design for general guidance when designing for Android.

Usage comparison

Design properties

Types

Default

The banner includes an optional title and secondary action button.

Behavior and interaction

Behavior

Lifecycle

• System-initiated: Appears without user action (triggered by state: account issue, system change, etc.).
• Persistent: Stays visible until user takes a resolving action or explicitly dismisses it.
• No auto-dismiss: Banners shouldn’t disappear on a timer.

Interruption model

• Non-modal: User can ignore it and continue interacting with underlying content.
• Medium friction: Designed to be interruptive for important issues, but not workflow-blocking.

Dismissal

• Dismissal should store the decision at least for the current session.
• If the underlying problem persists (e.g., failed payment), you may resurface the banner at sensible intervals or contextual moments (e.g., when entering a paywalled feature).

Positioning

Where it lives

• Placement: At the top of the screen, below the top app bar, spanning the full content width.
• Stacking: Only one banner at a time. No stacking or banner carousels.
• Elevation: Inline, shares elevation with content.

Interaction with scroll

• Scroll with content. Once the user scrolls past, it’s out of view.
• If the message must remain visible for the entire session, consider re-surface mechanisms (e.g., returning the user to a screen that still includes the banner) instead of pinning it permanently and taking up valuable vertical space.

Layout details

• Full-width rectangular container with concise text (one main message), primary action, and optional secondary action.
• Should be visually distinct from content, but not over-styled like an ad. Avoid patterns that may result in banner blindness.

Writing guidelines

TBD

Related components

Changelog