Alert banner
An alert banner displays an important message that helps keep users informed of timely or critical information.
You can display alert banners across a full site. You can also display them on certain pages where the alert relates only to the content on those pages.
There are 2 types of alerts:
- Status messages: These keep users informed but don’t require them to take any action.
- Validation messages: These respond to a user action, confirm success, or let the user know of an error that needs fixing.
Each type of alert uses a different color and icon to quickly show what kind of message it is:
- Blue: Informational (for general updates or notices)
- Yellow: Warning (something might affect the user)
- Green: Success (an interaction worked as expected)
- Red: Error (something went wrong or needs to be fixed)
Informational alert
Informational alerts keep users informed but don’t require them to take action.
- Example: an important public health update.
[Component coming soon]
Warning alert
Warning alerts draw attention to something that might cause a problem if the user doesn’t address it.
- Example: Your password will expire in 5 days. Update it now to avoid losing access.
[Component coming soon]
Success alert
Success alerts confirm the user completed an action successfully.
- Example: a confirmation a form has been submitted.
[Component coming soon]
Error alert
Error alerts tell the user something went wrong or needs fixing. For more details about validation for user input fields, visit Validation.
- Sitewide example: a lost server connection.
[Component coming soon]
When to use
Informational alerts
- To immediately communicate an important message to all users
- To state a system status or update
Validation alerts
- To give users clear feedback after they complete a process, like saving change
- To reinforce a confirmation or success message
When not to use
- Don't use alert banners for validation errors that disrupt users. Instead use an error message. For information about error messages, visit the Validation component page.
- Avoid using alert banners for destructive action such as permanently deleting a file. For information about destructive action messages, visit the Modal component page.
Use proper ARIA roles.
This will inform users on assistive technologies of the banner message's urgency:
role=”alert”for requiring immediate attentionrole=”status”for important but non-urgent informationrole=”region”for highlighting general information and updates
This requires an aria-label or aria-labelledby attribute. The attribute will help further explain the message. Be sure to match the aria-labelledby attribute to its corresponding id on the heading element.
For messages longer than one line, use the appropriate heading level. This will help structure the content of the message.
- Locate alert banners before the <H1> at the top of the screen. This will make them easier to find.
- Use sparingly. Users often miss them due to banner blindness and selective attention.
- Make sure the alert banner is the same length as the other components on the screen.
- Give users an option to dismiss an alert banner if appropriate.
Write clear alert banners
People should be able to understand the message quickly.
- Keep it short and specific.
- Use simple, direct language.
- Avoid acronyms and jargon.
- Put the most important information first.
- Keep the tone calm and helpful.
- Focus on helping the user recover.
- Avoid blaming the user.
- Tell the user what to do next.
- Make instructions clear and easy to follow.
- Follow writing standards.
- Avoid using all capital letters.