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.
- Providing a user contextual information or status of an action they’re trying to complete in a specific element on the visible page.
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.
|11/23/2020||1.0.0||Warning alert text color changed to be accessible.||E. Bohn, L. Kause, N. Springer|