Alerts are contextual pop-up style messages that can contain actions without obstructing the application.
Overview
Alerts are used to communicate to the user in an unobtrusive manner. They are primarily displayed as a response to the user taking action on an element; however they can also be used to communicate non-critical system messages, or to provide updates on actions the user has previously taken.
Try to avoid stacking Alerts. If you find a need to present the user with multiple Alerts at once, or when you want to interrupt the user, please consider using a Modal.
Refer to the UI state colors if you are unsure of what color Alert to use.
Usage
- Something important was deleted
- Confirming an important action
- An update is available
- Something was saved
- Something was downloaded
- A problem or error occurred
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next focusable element. If the current focus is the last element, focus will leave the component. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element, focus will leave the component. |
Writing and copy
Alerts are meant to quickly convey a message to the user. Consistent Alert structure, verbiage, and copy ensures that the user will have an expected experience across the platform. Keep copy short and to the point.