Alert banners show pressing and high-signal messages, such as system alerts. They are meant to be noticed and prompt users to take action.
Text is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take.
An alert banner always has a semantic meaning and uses semantic colors. Only gray (neutral), blue (informative), and red (negative) are available as options.
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.
An alert banner can include an icon-only close button to dismiss it.
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.
neutral / informative / negative
If undefined, this button does not show up.
yes / no
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.
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.
The close button is optional, depending on context. Consider adding one to let a user easily dismiss the alert.
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.
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.
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.
Alert banners should appear at the top of a page, below the header.
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.
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.
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.
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.
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).
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.
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.
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.
|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.|
|Nov 10, 2020||2.0.1|
|May 22, 2020||2.0.0|
|Mar 13, 2020||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
Component is included in the Spectrum for Adobe XD plugin.