Version 1.0.0

Alert banner

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

Anatomy#


Image illustrating through labels the component parts of an alert banner, including its icon, text, background, emphasized text, quiet over background button, small divider, and close button.Image illustrating through labels the component parts of an alert banner, including its icon, text, background, emphasized text, quiet over background 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 Value
text
text
variant
neutral / informative / negative
neutral
action label
text
If undefined, this button does not show up.
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.

Key example illustrating correct usage of optional close button in an alert banner. Text, Your trial has expired. One button, label Purchase. Close button at the end of the alert banner.

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.

Colors for warnings or "soft" errors#

Do not use yellow or orange colors for warnings or "soft" errors because the contrast is not accessible. If you need to show these kinds of errors, use the gray (neutral) semantic color option.

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.

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#


KeyInteraction
TabPlaces 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#


DateNumberNotes
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#


N/A

All interactive states

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

Multiple options

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

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

Defined behaviors

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

Usage guidelines

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

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

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 included in Spectrum DNA.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.