Alerts
Alerts notify users about important pieces of information. They can be categorised as success, information, warning or error messages.
How to use alerts
Alerts communicate important messages about the status of a system or service to users. They are categorised as success, information, warning or error messages, with a colour associated to each state. You can read more about when to use which alert in the copy guidance section.
When using alerts:
- Keep messaging short and simple
- Consider how they might draw focus from other elements of an experience, as they are disruptive
- Use ARIA to announce the alert to screen reader users when it appears
- If the alert can be dismissed, make sure that focus is moved to the alert when it appears and then returned to the previously focused element when closed
Alerts are for messages of medium importance. For highly important messages, consider a modal instead.
Types of alerts
Standard
Standard alerts can’t be dismissed, and will remain on screen as long as the user is on it.
Dismissible
Dismissible alerts include a close action so that users can choose to dismiss them. The close icon has the accessible name ‘close’.
Styles of alerts
Alerts can be used with a primary or secondary styling. You can use the different styles to create heirachy or emphasis.
Primary
Use primary alerts for when you need to get the user’s attention and interrupt what they’re doing to tell them something significant.
When showing multiple alerts, you can use the primary style to highlight the alert of the most importance.
Secondary
Use secondary alerts for more gentle messaging, such as a reminder of something important you need to highlight to the user, but isn’t as urgent as the primary style alerts.
Content guidelines
Alerts can be organised into four different semantic categories: information, error, warning and success. Each of these categories is denoted by a different colour.
However, remember that colour alone isn’t enough to communicate effectively with all users. All of the information the user needs must be contained within the content itself.
When writing content for alerts:
- Keep the message concise and the language simple
- Be specific rather than generic
- Include a next action where possible
Information messages
Information messages are associated with the semantic colour blue. They’re used for messages that might help a user to complete their task, but don’t require any action from the user in order to progress.
Error messages
Error messages are associated with the semantic colour red. They’re for communicating issues with the system or service to the user, and are typically used in situations where the user’s not able to progress.
Warning messages
Warning messages are associated with the semantic colour yellow. Like an error message, they’re for communicating issues with the system or service, but with a lower level of emphasis. For example, the user may still be able to progress.
Success messages
Success messages are associated with the semantic colour green. They’re for acknowledging that an action that a user has taken has been successfully submitted to the system.