Banner

Stable

Communicate important, persistent information at the page or system level, drawing attention without blocking the workflow.

Anatomy

1. Icon and background color: these icons and colors are set to the default that matches the message type. For example, warning messages are yellow with an exclamation point icon.
2. Title (optional): indicates the purpose of the message.
3. Description: describes the issue and any action the person needs to take to resolve it, if applicable.
4. Close button (optional): allows users to close the banner.
5. Actions (optional): enables users to act on the message content. Can be one or more buttons and/or links.

Variants

Neutral

General information that doesn't require emphasis or urgency

Info

Helpful context or tips that assist the user

Success

Confirms a completed action

Warning

Alerts users to potential issues that don't block their workflow. Use Warning when the user can still prevent a problem.

Error

Signals errors. Use Error when the outcome has already failed.

Style

Full-width

Use the full-width style when a banner needs to span the entire page width, typically for system-wide messages.

Usage guidelines

When to use

Use banners to:

• Highlight important information that should remain visible until it's read or resolved
• Communicate page-level or system-wide status, updates, changes, or even tips
• Draw attention to issues that may require follow-up, even after the current action

Consider alternatives

Banners are medium-priority messages. Use higher- or lower-priority components based on criticality and whether action is required.

• For temporary messages, use Alert instead.
• For complex messages that require immediate action, use Modal.
• For messages that require explicit user confirmation, use Modal or Confirmation popover instead.

Best practices

Use banners sparingly and only when necessary

Banners can disrupt the user experience and create alert fatigue:

• Use banners intentionally so they stay meaningful and noticeable
• Confine each banner to the page or section it relates to
• Remove or update banners once the message is no longer relevant

Do

Use banners intentionally for important, high-impact messages in relevant sections

Use with caution

Multiple sections may require banners across one page: ensure each banner is necessary, relevant, and not overwhelming when combined.

Visibility

Place banners in a consistent, prominent location, typically at the top of the page or section, below the navigation bar or container header.

Do

Place banners in a consistent, prominent location near relevant content so they're noticeable without disrupting the layout.

Don't

Place banners inconsistently, far from relevant content, or in low-visibility areas where they can be overlooked.

Dismissible

Make banners dismissible unless users need to take critical action.

Do

Make banners dismissible by default, unless users need to take critical action.

Use with caution

Use non-dismissible banners only when immediate or required user action is needed.

Stacking

Avoid displaying more than 1 banner at a time if possible. If several messages need to appear in the same section, consider alternative variants or different UI patterns instead.

When you must use multiple banners, stack them by severity from top to bottom: Error → Warning → Success → Info → Neutral.

Do

Show only one banner per section when possible to reduce noise.

Use with caution

If multiple banners are necessary, avoid overload and stack them by severity from most to least critical.

Use actions where needed

Try to include action buttons that help resolve the issue:

• Prefer a single primary action; use 2 buttons at most
• Highlight the primary action and keep labels short and specific (e.g. "Refresh data", "Update")

Do

Include a clear primary action with short, specific labels that help resolve the issue.

Don't

Show banners without actions (or "Learn more") when users need a clear next step to resolve the issue.

Use more than just color

To maximize accessibility, make sure the message is clear from the content. Icons can also support the message. Color alone doesn't always distinguish different alert types.

Do

Use clear, descriptive text, and reinforce meaning with icons alongside color.

Don't

Rely on color alone or ambiguous text to convey meaning.

Content

Title

• Keep it short and descriptive, communicating the most important information
• Make titles scannable and self-contained. Users should understand the issue from the title alone

Body content

• Be concise: avoid repeating or paraphrasing the title
• Limit to 1–2 sentences
• Include what went wrong, how to fix it, and the consequences (if relevant)
• Avoid technical jargon. Include links to docs when necessary

CTA (optional)

• Keep the CTA concise and clearly indicate the action the user can take
• Limit the CTA to 1 to 3 words (e.g. "Refresh data", "Go to dashboard")
• Use verbs that describe the outcome, not generic text like "Click here"

Link

• Write link text that clearly describes where it goes (e.g. "View release notes")
• Place links where they feel natural: they don't need to be at the end of the sentence

For detailed content guidelines for each message type, refer to In-app messages.