Container: The Banner's background color and border change per variant to match its semantic use. Outlined banners swap the filled background for a white surface with a colored border.
Icon: Icons adds extra contextual meaning to each variant. Icons can be custom or removed entirely.
Title: Banner titles summarize the Banner's purpose.
Description: Description body text provides additional context to support the title. Inline links may be used.
Close button: Icon-only close buttons provide an alternate method of dismissing a Banner outside of the actions.
Actions: Primary actions allow the user to act upon an issue the Banner represents. Dismiss buttons may be included.

Banners are used to communicate important information about the current page or workflow in a non-modal fashion. We encourage using Banners in workflow-, page-, and system-level contexts to display status changes, warnings, or feature announcements.

In the case of form validation, use the available inline error messages instead.

Banner vs Snackbar

Banners and Snackbars are similar components aimed at communicating information to the user somewhere on the current page. It's important to note the different use cases for each and the components are not interchangeable:

Banners are positioned contextually on the page and persist within the layout until dismissed by the user or the issue resolves. Banners are intended to be used for more important messages that may need user attention.
Snackbars are non-disruptive messages that always display at the bottom of the viewport and are dismissed automatically. They provide an update on an action the user has taken, such as confirming a form was successfully saved.

Best practices

Variant usage

Select the Banner variant that best matches the intended semantic meaning of the message. Refrain from using Banners to match a particular theme or color scheme.

Do: Consider semantic meaning in variant usage.

Don't: Use variants to match a theme or color scheme.

Dismissing banners

When enabling dismissal, allow users the option to dismiss Banners for issues that are not considered critical to address. The dismiss button can either be a dismiss action button, or an icon-only close button. Be aware that it's not possible to enable both at once.

Consider the use case. If a Banner presents information that can be addressed at any time, provide dismissal buttons. If a Banner communicates an issue that must be resolved, make it persistent.

Do: Allow users to dismiss informational banners.

Don't: Force non-critical messages to remain visible.

Actions

When a Banner requires a call-to-action, limit use to one primary action. If necessary, include a dismiss action.

Do: Provide a single, clear action alongside a dismiss option.

Types

Inline

Inline Banners expand to the full width of their parent container and are embedded within the page flow. Use them for contextual messages tied to the surrounding content.

Alert

Alert Banners are elevated banners used to communication information about the entire page.

Announcement

Announcements are full-width Banners used for application-wide messages such as maintenance notices or feature launches.

Appearance

Variants

Each variant of the Banner comes with a different visual treatment in background and border color. Variants are meant to represent consistent semantic meanings

Default

Neutral Banners are used for general-purpose tips and guidance.

Information

Information Banners add helpful context and tips the user may be unaware of.

Success

Success Banners confirms a positive outcome such as a process completing successfully.

Caution

Warning Banners inform the user of an issue that may require their attention.

Error

Error Banners inform the user of a critical error or issue that must be addressed immediately.

Feature

Feature Banners promote newly available features or system updates.

Outlined

Outlined Banners use a colored border instead of a filled background color to communicate its semantic meaning. Use outlined Banners for a more subtle visual treatment within the UI.

Filled

Default filled Banners provide stronger visual prominence.

Outlined

Outlined Banners use borders instead of background color to convey semantic meaning.

Behaviors

States

Base

The base Banner's close button uses default styles with no user interaction.

Disabled close button

A disabled close button cannot be interacted with.

Disabled dismiss button

A disabled dismiss button cannot be interacted with.

Loading action

The primary action automatically shows a loading indicator until background processes are complete.

Responsiveness

Banners are inherently responsive. Actions will wrap under the main content when the Banner's container is 576px or less.

Responsive

Actions wrap below the content when the Banner container is narrower than 576px.

Close and dismiss

Banners can be dismissed one of two ways: with an icon-only close button or with a dismiss action. Only one can be enabled at any given time.

Close button

Icon-only buttons can be used for quick dismissal.

Dismiss button

A dismiss button exists alongside the primary action.

Content

Action labels

Action button labels should clearly describe the button's action, similarly to buttons. Use a single verb or verb phrase.

Do: Use specific action verbs.

Don't: Use vague labels.

Title and description

Banner titles should summarize the intended message in a few strong words written in sentence case. They are bolded to catch the user's eye. As titles aren't required, we recommend not relying on them as the sole provider of information.

Descriptions should support the title with supplementary detail. They may be used without a title.

Do: Use a short title with a supporting description.

Don't: Put all information within the title.

Tone

Match each variant's tone to its semantic use. Error and warning Banners should be direct and factual. Feature and information Banners can be more conversational.

Do: Use a direct tone for error banners.

Don't: Use casual language for critical messages.

Banner

Anatomy

Guidelines

Banner vs Snackbar

Best practices

Variant usage

Dismissing banners

Actions

Types

Appearance

Variants

Outlined

Behaviors

States

Responsiveness

Close and dismiss

Content

Action labels

Title and description

Tone

On this page