Skip to content
Design System

Banner Alerts

Banner alerts inform users about important changes or persistent conditions in a prominent way. These alerts can be placed at the top of a page or on a particular section of a page.

Show developer docs

Design

Section titled “ Design”

Variants

Section titled “Variants”
Along with a description that follows the title.
Primary Secondary Tertiary

Alignment

Section titled “Alignment”

Animation

Section titled “Animation”
Use this animation to draw extra attention to an important message.
Along with a description that follows the title.

In Practice

Section titled “ In Practice”
  • The dismiss (X) option allows users to close a system alert which removes it from the page. Alerts should be dismissible unless they contain critical information or an important action step.
  • DO NOT include the dismiss option on Danger alerts.
  • If the dismiss option is included and there is no action available to take, do not include a button labeled “Close” or “Cancel”.

Variants

Section titled “Variants”

The four variants use different icons and colors to indicate the type and urgency of the message.

  • Info: informs the user of a change or gives them advice.
  • Success: lets the user know of a successful outcome. NOTE: Toast alerts are used by default for this type of messaging. Use a banner alert only if it is persistent, delayed, or if there is an additional action.
  • Warning: lets the user know about important system information that deserves caution.
  • Danger: alerts the user of a problem that requires immediate attention.

Placement

Section titled “Placement”
  • If the message relates to the page topic as a whole, place the alert at the top of the page.
  • If the message is specific to a section of the page, place the alert below the section header.
  • Banner alerts always span the full width of the container to which they apply.

Content guidelines

Section titled “ Content guidelines”

Title

Section titled “Title”
  • Use plain English instead of obscure codes or abbreviations.
  • Follow the content guidelines for headings and subheadings. View guidelines

Body

Section titled “Body”
  • Be concise: keep content to 1 to 2 sentences where possible
  • Clarify the benefit of the main task
  • Be written in sentence case and use appropriate punctuation
  • Avoid repeating the heading
  • Explain how to resolve the issue, particularly for warning and critical banners

Accessibility

Section titled “ Accessibility”

Keyboard focus: When an urgent alert is dynamically added to the page, ensure its content receives immediate attention.

Follow the accessibility guidelines for each component found in the alert. View guidelines

Design resources

Section titled “ Design resources”
View component in Figma