Alert banner

Version 3.0.0

Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.

3 examples of alert banners in 3 different semantic variants. First example, gray color, text Your trial has expired. Please purchase to continue. One close button and one action, label Purchase. Second example, blue color, text Your trial will expire in 3 days. One close button and one action, label Purchase. Third example, red color, text Network connection interrupted. One close button and one action, label Try again.3 examples of alert banners in 3 different semantic variants. First example, gray color, text Your trial has expired. Please purchase to continue. One close button and one action, label Purchase. Second example, blue color, text Your trial will expire in 3 days. One close button and one action, label Purchase. Third example, red color, text Network connection interrupted. One close button and one action, label Try again.
DateVersionSpectrumApr 06, 20223.0.0DownloadNov 10, 20202.0.1DownloadMay 22, 20202.0.0DownloadMar 13, 20201.0.0Download

Anatomy#

Image illustrating through labels the component parts of an alert banner, including its icon, text, background, emphasized text, outline secondary button, small divider, and close button.Image illustrating through labels the component parts of an alert banner, including its icon, text, background, emphasized text, outline secondary button, small divider, and close button.

Options#

Key example of a neutral alert banner with text "All documents in this folder have been archived", wrapped on two lines with a close button on the right.

Text#

Text is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take.

3 key examples of semantic variants of alert banners, each with close buttons. First example, a gray or “neutral” variant, text Your trial has expired. Second example, a blue or “informative” variant with an information icon, text Your trial expires in 3 days. The words “3 days” are in emphasized text. Third example, a red or “negative” variant with an alert icon, text Connection interrupted.

Semantic variants#

An alert banner always has a semantic meaning and uses semantic colors. Only gray (neutral), blue (informative), and red (negative) are available as options.

Key example of a gray color alert banner, text Your trial has expired. Button with label text, Buy now.

Actionable#

An alert banner ideally provides a way for a user to address an issue in-line with an action. It can have both an icon-only close button and a button with a contextual action to take. There should never be more than one button with a contextual action in an alert banner.

Key example of a gray color alert banner, text Your trial has expired, and an icon-only close button.

Dismissible#

An alert banner can include an icon-only close button to dismiss it.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Valuetexttext–variantneutral / informative / negativeneutralaction labeltext
If undefined, this button does not appear.
–is dismissibleyes / nono

Behaviors#

3 examples of alert banners, each with close buttons. First example, a red banner with an alert icon, text Connection interrupted, all text aligned on one line. Second example, a gray banner with no icon, text All documents in this folder have been archived, text wrapped to two lines. Third example, a blue banner with an information icon, text A new version of Lightroom Classic is now available, text wrapped to two lines with a button labeled Update on the third line.

Text overflow#

When the text is too long for the available horizontal space, it wraps to form another line. In actionable alert banners, the button moves below the text prior to text wrapping.

Usage guidelines#

Make alert banners actionable#

Whenever possible, add an in-line action button if there's a way for a user to quickly address the issue associated with an alert.

do
Key example illustrating correct usage of optional in-line action button in an alert banner. Alert banner with an alert icon, text Connection interrupted. Button, label Try again.

Consider including a close button#

The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert.

do
Key example illustrating correct usage of optional in-line action button in an alert banner. Alert banner with an alert icon, text Connection interrupted. Button, label Try again.

Use alert banners only for system-level messaging#

Alert banners should be reserved only for high-signal, system-level alert messages, such as internet connection issues, expirations of subscriptions, or major changes.

For in-app notifications, lightweight confirmations of actions, or more promotional messaging, use a toast, badge, or other component.

dont
Key example of alert banner with incorrect usage of messaging. Text, Copied to clipboard.

Be aware of color and semantic meaning#

Don’t use yellow or orange colors for errors because the contrast is not accessible.

If you need to show a “notice” message or other non-critical communication, use the gray (neutral) or blue (informative) semantic color options. Reserve the red (negative) option only for errors that directly interrupt or block a user’s experience — not for nice-to-know information.

dont
Key example of alert banner with incorrect usage of color. Orange-colored alert with an alert icon. Text, Trial is about to expire. One button, label Upgrade.

Include only one action per alert banner#

Don't include more than one action in an alert banner. Having more than one action to choose from can be overwhelming, and it can become difficult for users to decide what to do next in such a small space.

dont
Key example of alert banner with incorrect usage of buttons with actions. Alert banner with alert icon, text No connection. Two buttons with actions, labels Learn more, Try again.

Place alert banners at the top#

Alert banners should appear at the top of a page, below the header.

dont
Key example of alert banner with incorrect placement at the bottom of a page. Text, Your trial has expired. Button, label Purchase. Icon-only close button at the end.

Don't stack alert banners#

Don't show multiple alert banners at the same time. If a new alert banner appears with a higher priority message, it should replace an existing alert banner of lesser importance until the higher priority one has been addressed.

dont
Key example of two alert banners incorrectly being shown at the same time on the same page. First alert banner at top of page, text Your trial has expired, button label Purchase, icon-only close button at the end. Second alert banner stacked below the first banner, text Connection interrupted, button label Try again, icon-only close button at the end.

Overlay content#

Overlay an alert banner when it's expected to fade in and out without impacting the content underneath it, and when it's not hiding any important actions or information by being there. An alert banner should only overlay content if it is dismissible.

do
Key example of alert banner correctly overlaying content. Text, Your trial has expired. Button, label Purchase. Icon-only close button at the end.

Push content#

Push an alert banner when it's expected to stay in place, when it's not dismissible, or when no information should be hidden from the view.

do
Key example of alert banner correctly pushing page content down. Text, Your trial has expired. Button, label Purchase.

Persist errors to maintain visibility#

If a user dismisses an alert banner without addressing an error that needs to be resolved, it should come back into view at the next possible occasion.

Don't let alert banners time out#

Never allow alert banners to time out. Since these are system-level messages, they should not dismiss on their own unless there is a change in the system that resolves an issue (e.g., regaining internet connectivity after losing it).

Content standards#

Don't include periods in short phrases or single sentences#

Do not include periods in alert banner messages that are short phrases or single sentences. This helps keep the text quicker to read and easier to parse.

If the message must be more than one sentence in order to convey the alert's information, use a period at the end of each sentence.

do
Key example of two alert banners with correct usage of periods in the text. First example, text Your trial has expired, no period at the end of the sentence. Second example, text Your trial has expired. Purchase to continue. Periods at the end of both sentences.
dont
Key example of an alert banners with incorrect usage of periods in the text. Alert banner, text Your trial has expired. Period at the end of the sentence.

Keep text concise and clear#

Keep an alert banner's message concise while still being clear, using either a short phrase or a complete sentence that describes what's happening and what someone needs to know.

Whenever possible, include an in-line action for a user to take so that they can readily address the issue explained in the message.

do
Key example of an alert banner correctly worded with a concise and descriptive message. Alert banner with alert icon, text Connection interrupted. Button, label Try again.
dont
Key example of an alert banner incorrectly worded with an overly lengthy message. Alert banner with alert icon, text Your internet connection was unexpectedly interrupted. Please try reconnecting. Button, label Try again.

Internationalization#

Key example of 3 alert banners in Arabic, in the 3 different semantic variants, all with component layout mirrored.

RTL#

For RTL (right-to-left) languages, the layout of the alert banner is mirrored. The icon is right-aligned and the close button is left-aligned. If the alert banner is actionable, the button appears on the left side.

Keyboard interactions#

KeyInteractionTabPlaces the focus on the next interactive element, which is either a button or a close button.Shift + TabPlaces the focus on the previous interactive element, which is either a button or a close button.Space or EnterIf focus is on the close button, dismisses the alert banner. If focus is on the button, executes the button action.EscDismisses the alert banner if possible. This is equivalent to selecting the close button.

Changelog#

DateNumberNotesApr 06, 20223.0.0
  • Updated all colors to 6.0.0
Nov 10, 20202.0.1
  • Changed text to regular weight instead of bold
  • Added guidelines for period usage
May 22, 20202.0.0
  • Left-aligned content for single-line designs in desktop scale
  • Corrected padding and margins in mobile scale
  • Corrected button text size in desktop scale
  • Corrected baseline of text in desktop scale
  • Corrected informative and error icon placement
Mar 13, 20201.0.0
  • This component has been added to the website

Design checklist#

check

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

check

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

check

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

check

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

check

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

check

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

check

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

check

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

check

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

unchecked

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.