Banner

Banners are in-flow, static messages used to convey important information. They persist on the page until dismissed

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: September 12, 2024

Overview

The Banner component is used to display important, concise information, and provide actions for users. It's often used for system-level notifications, alerts, or informational messages that are directly related to the user's current context.

Design

Structure

🟡 Banner / variant=Neutral, subtle=False

The Banner component consists of the following elements:

  • Container: This is the outermost part of the banner. It holds all other elements of the banner.
  • Icon (optional): This is used to visually represent the type of information being communicated.
  • Title (optional): This is a brief summary of the information.
  • Body: This provides additional detail about the information.
  • Dismiss (optional): This allows the user to dismiss the banner, if permitted.
  • Action button (optional): Allows the user to take an action from the banner

 

Types and variants

There are two types of banners:

  • Default: includes a visible container, additional padding, and a colored background
  • Subtle: reduced padding,
Neutral, Default

Neutral, Default

Neutral, Subtle

Neutral, Subtle

Info, Default

Info, Default

Info, Subtle

Info, Subtle

Success, Default

Success, Default

Success, Subtle

Success, Subtle

Warning, Default

Warning, Default

Warning, Subtle

Warning, Subtle

Error, Default

Error, Default

Error, Subtle

Error, Subtle

Guidelines

  • Banners are statically positioned block-level elements
  • Make banners dismissible by default, unless they convey critical information or communicate required action
  • Banners should be placed at the top of the page or section where it is most relevant. It should be immediately visible to the user.
  • Prefer toasts for timely errors and feedback

Use cases

  • Informing users that a certain option may be deprecated in the future
  • Alerting users that there are errors within a form submission
  • Warning users that a particular action may have implictions

 

  • Use the appropriate banner style to communicate the message
  • Use subtle banner variants for messages that will always persist in the UI
  • Use the default variants for temporary or conditional messages
  • Add a dismiss action if the banner to temporary neutral, informative, and success banners
  • Modify the styles of the banner and its repsective variant, this includes changing colors, borders, padding, and icons
  • Use multiple banners in a container consecutively—limit to a single banner per container; ideally, it's best not to include more than a single banner on the page
  • Add lengthy content to the banner. Banner content should be no more than two lines in a standard-width container (anything 800px or greater)

Content

The content of the Banner should be concise and clear. The title should summarize the information and the description should provide additional detail if necessary. The action should be a clear call to action for the user.

  • Banners always include a message, and can optionally include:
  • An icon
  • A dismiss button
  • A title
  • Aside from the optional dismiss button and in-message links, avoid using other interactive content within the banner

Accessibility

  • Ensure the Banner has a role of "alert" for assistive technologies.
  • Use clear, concise language for the title and description.
  • Ensure the action (if present) is keyboard accessible and clearly announced by screen readers.
  • Use sufficient color contrast for text and background colors.

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy