Banner

Banner is used to highlight important information.

Page navigation navigation

Banner has two main uses:

Highlight important information.
Provide feedback after a user action.

Best Practices

Use Banners sparingly and only when necessary. Banners can disrupt the user experience and should only be used when and where relevant. Keep messages concise, and stick to default paragraph styles. Use the title when appropriate Only show one Banner at a time to prevent alert fatigue. For more information about alert fatigue, see this this article.

Anatomy

Options

Variant

Critical

Use for critical errors or destructive actions. For example: form validation errors, and repo deletion confirmation

Text within a box that has a light red outline and a lighter red background. There is a vibrant red stop icon with an exclamation point inside that comes before the text within the Banner.

Warning

Alerts users to potential issues. For example: connectivity problems or possibly hidden items due to active filters.

Text within a box that has a yellow outline and a lighter yellow background. There is a dark yellow triangle icon with an exclamation point inside that comes before the text within the Banner.

Success

Signals successful actions. For example, a successful issue transfer when the user is not brought to the new page.

Only use success messages if the success is not easily apparent in the UI.

Text within a box that has a green outline and a lighter green background. There is a vibrant green circle icon with a check icon inside the circle that comes before the text within the Banner.

Info

Provides non-critical context. For example, feature prompts or ongoing processes.

Text within a box that has a light blue outline and a lighter blue background. There is a vibrant blue circle icon with the letter i inside that comes before the text within the Banner.

Upsell

Informs users about a feature that can be enabled by upgrading their plan.

Text within a box that has a light purple outline and a lighter purple background. There is a vibrant purple computer icon that comes before the text within the Banner.

Title

Use a title to concisely present the topic of the Banner when the message of the Banner is complex and too long to scan. Titles are required and act as a semantic page heading but can be visually hidden if the body text of the Banner is short and easily scannable.

Use the built-in accessibility annotations in the Figma components to define the heading level and text relevant to its context.

Banner without title and Banner with title

Dismissable

Dismiss button

Banners with an onDismiss property automatically show a dismiss button. This should be used for Banners that inform about something that the user can not solve. For example issues with the organization they are part of or informational Banners. When it makes sense, the choice to dismiss the Banner should be stored and the Banner should not be shown again.

Use the following as a guideline:

If you're on a page in which you can do other tasks, and the Banner is not blocking / does not have to be addressed, then you should be able to have a close button.
If accidental closure of the Banner would leave the user confused or missing something critical, it should not have a close button.

Critical banners communicate an error which the user must resolve in order for the banner to disappear.

In certain cases, the banner may be dismissible when notifying the user of a failed action. If used to warn about destructive actions, the banner should also not be dismissible.

Actions

A maximum of 2 actions can be added to a Banner. Whenever possible it is recommended to only add a single action to better direct the users attention.

For Banners with a single action, you can choose between adding a primary or secondary action depending on how much attention you want to draw to the action.

For Banners with two actions, one of them must be primary and the other must be secondary. In this case, use the primary action for the recommended action. For example, the primary action enables a feature and the secondary action links more information.

Icon

Icons match the Banner variant and can't be disabled, but custom icons can be used for info and upsell.

Layouts

Single-line Banners have actions and dismiss buttons on the same line.
Banners with titles align dismiss buttons to the top right.
Banners with a title but no dismiss button will have the actions aligned to the top right corner
Complex Banners show actions left-aligned below the body text.

Responsive Design

One Banner at full width, with all of the content in one row, the second Banner is shrunk to a smaller width, the icon, wrapped text, and dismiss button all in one row, with the action item in the second row.

Large screens adjust Banner layouts. Small screens always use stacked layouts.

Position

Place Banners near the relevant section or above the page headline for global relevance. In Dialogs, Banners appear below the header.