An Alert Banner communicates system-related updates, user-required actions, or warnings. It appears inline or at the top of a section and is styled based on urgency or context.

Anatomy

An alert banner consists of a container (A), an icon (B), a title and optional description (C), and an optional action button (D).

Types

Purpose

Alert banners should surface account-related issues, system prompts, or re-engagement journeys — always tied to a specific feature or flow.

Intent

Choose the banner style based on urgency and message type.

Action

Always include a CTA that directly reflects the action required to resolve the alert.

Placement

Banners must be positioned below the top navigation bar, at the top of the screen content.