Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.
- intrusive by design
- created on purpose
- dismissible by a user
- not triggered by user action or back-end event.
Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.
- Only use an alert if its message or action applies to an entire product or site.
- Write the alert in plain language that's clean and concise to minimise a user's cognitive load.
- If the user needs more information or to complete an action, use link text for the call to action.
- Place the alert at the top of the screen before the header.
- Only use the critical alert setting for messages or actions that warrant it.
- Limit actions to one per alert banner.
- Don’t use an alert if its message applies only to that feature or page.
- Alerts shouldn't cover other components, only pushing down page content.
- Don't use alerts for actions initiated by the user or backend.
An alert’s styling is according to its meaning and uses semantic colours.
Alert colours include:
- grey for general information
- orange for a minor warning
- red for a critical error or expected dangerous event.
- To communicate general information to users.
- To communicate a minor warnings to users.
- To communicate a critical error has occurred or dangerous event is expected to users.
So that users view alerts in order of importance, they appear in priority order: