Overview

Alerts display in direct response to a user action (e.g. clicking the Submit button on a form) and can be informational or identify actions required on that page before the user can continue. They appear at the top of the content area, push other content down, and persist until the user dismisses them or navigates away from the page. There are four types of notifications: error, warning, success, and informational.

Usage

Use when

  • Providing a user contextual information or status of an action they’re trying to complete in a specific element on the visible page.
Example
menu App Title
We'll never share your email with anyone else.
Alerts are contextual to their containing UI element.

Don’t use when

  • Providing a user with a message related to a page-level or out-of-view event, like completion of a report generation. Instead, use a Toast .
  • Providing a user with a system-level message, like a network outage or browser incompatibility. Instead, use a Modal
  • Attaching an error message to an input.

Specifications

  • Container (Height: 56px; Radius: 2px; Color: white background, 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) required
  • Alert text (Font: Open Sans Bold 14px) required
  • Leading Non-Interactive Icon/ Charm (16x16px) optional
  • Button (text only, right aligned) or trailing close icon (16px16px) optional
  • Link (underlined, only one per alert) optional

Alerts

  • Appear on top of the main content container.
  • Stretch horizontally to fill 100% of the container they are placed in.
    • Always follow typography line length guidelines when displaying alerts. Pair with another component, like a Form, or place in a fixed-width container to ensure alerts don’t get too wide.
  • Push other content down to make room for an alert on a page.
  • Can include tint to add extra emphasis or to increase contrast with page content. When changing background color, make sure the text and icons pass contrast ratio requirements .
  • Do not have a shadow.
  • Remain on the page until dismissed.

Basic Alerts

Behaviors

  • When applicable, dismiss by clicking the close icon.
  • When dismissed or resolved, alerts slide up and fade out, relinquishing their space.

Editorial

  • Keep titles three to five words if possible.
  • For titles, use title case and capitalize prepositions of four letters or more.
  • Messages should tell the user what’s happening and whether they need to act to successfully keep moving through a task. Warning alerts might tell a user what could happen if they don’t address what they’re being warned about.
  • For messages, use full sentences with punctuation. Use sentence case.
  • Unordered lists offer a structured format to present:
    • Items needing resolution
    • Guidelines to successful completion
    • Ways to resolve problems

Accessibility

  • Include the role="alert" attribute.
  • An alert is a special kind of assertive ARIA live region, so screen readers should immediately interrupt anything they were previously saying and instead read the announcement. Most screen readers say “Alert,” before reading the text inside the alert.
  • If user action is required in order to continue, use role="alertdialog".
  • Alerts should not be visually hidden if they are not being used. If you do not want a screen reader to pick up an alert, use the aria-hidden='true' HTML attribute and/or {display: none;} in your CSS.
  • It’s best to have only one alert message visible at a time because some screen readers will read all of the available alert messages each time that a new alert message is activated. When activating a new alert, it’s best to deactivate any other alerts first.
  • When constructing an alert message, consider how it will be read by a screen reader:
    • Write out dates, e.g., December 1, 2018 and not 12/1/2018.
    • Avoid non-text symbols like “/” and “+”.
    • When describing a date or time range use “to” instead of “–”.
What's Changed
Date Version Notes Contributors
11/23/2020 1.0.0 Warning alert text color changed to be accessible. E. Bohn, L. Kause, N. Springer