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
alert
Error! Your username and password were incorrect
|
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 |