Spectrum

Version 3.0.0

Alert banner

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

Table of contents#

Anatomy
Options
Behaviors
Usage guidelines
Content standards
Internationalization
Keyboard interactions
Changelog
Design checklist

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.

Options#

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.

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.

Property	Values	Default value
text	text	–
variant	neutral / informative / negative	neutral
action label	text If undefined, this button does not appear.	–
is dismissible	yes / no	no

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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#

Key	Interaction
Tab	Places the focus on the next interactive element, which is either a button or a close button.
Shift + Tab	Places the focus on the previous interactive element, which is either a button or a close button.
Space or Enter	If focus is on the close button, dismisses the alert banner. If focus is on the button, executes the button action.
Esc	Dismisses the alert banner if possible. This is equivalent to selecting the close button.

Changelog#

Date	Number	Notes
Apr 06, 2022	3.0.0	Updated all colors to 6.0.0
Nov 10, 2020	2.0.1	Changed text to regular weight instead of bold Added guidelines for period usage
May 22, 2020	2.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, 2020	1.0.0	This component has been added to the website

Design checklist#

All interactive states

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

All color themes

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

All platform scales

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

Accessible use of color

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

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).

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).

Content design

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

Defined options

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

Defined behaviors

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

Usage guidelines

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

Writing guidelines

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

Internationalization guidelines

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

Keyboard interactions

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

Design tokens

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

UI kit

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

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.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.

Scatter plot

Alert dialog