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.
Interactive demo - Sainsbury's
<Listtype="bare"spaced>
<ListItemtype="bare">
<Alert>1 item selected</Alert>
</ListItem>
<ListItemtype="bare">
<Alertvariant="info">
<AlertIcon>
<InfoCirclearia-label="Information"role="img"/>
</AlertIcon>
1 new task’s been assigned to you since you last logged in.
</Alert>
</ListItem>
<ListItemtype="bare">
<Alertvariant="error">
<AlertIcon>
<ErrorCirclearia-label="Error"role="img"/>
</AlertIcon>
You haven’t added your address. Please provide your address to continue.
</Alert>
</ListItem>
<ListItemtype="bare">
<Alertvariant="warning">
You haven’t added a phone number to your account. Adding a number means we
can get in touch if we need to.
</Alert>
</ListItem>
<ListItemtype="bare">
<Alertvariant="success">
We’ve added ‘Heinz Baked Beans’ to your trolley.
</Alert>
</ListItem>
</List>
Dismissable
Dismissable alerts include a close action so that users can choose to dismiss them. The close icon has the accessible name ‘close’.
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 copy itself.
When writing copy for alerts:
keep the message concise and the language simple
be specific rather than generic
include a next action, if one is needed
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.
Interactive demo - Sainsbury's
<Alertvariant="info"openonClose={()=>{}}squared>
<AlertIcon>
<InfoCirclearia-label="Information"role="img"/>
</AlertIcon>
1 new task’s been assigned to you since you last logged in.
</Alert>
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.
Interactive demo - Sainsbury's
<Alertvariant="error"openonClose={()=>{}}squared>
<AlertIcon>
<InfoCirclearia-label="Error"role="img"/>
</AlertIcon>
You haven’t added your address. Please provide your address to continue.
</Alert>
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.
You haven’t added a phone number to your account. Adding a number means we can
get in touch if we need to.
</Alert>
Success messages
Success messages are associated with the semantic colour green. They’re for acknoweldging that an action that a user has taken has been successfully submitted to the system.