Skip to main content

Alerts

Alerts provide contextual information about system status that persists until dismissed or resolved.

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

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.
  • Notifying the user of a low priority message. Instead, use a Message.
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
Last updated September 6, 2024.