Alerts
Alerts communicate system or data statuses, such as warnings, to users.
On this page:
Best Practices
- Put Alerts at the top of the page, under the Page Title.
- Alerts use the Status Colors for their colors and meaning.
- Status Colors only add visual cues. The content of the Alert must make the meaning obvious to assistive technology users.
- Use Info (Blue) to communicate informative or helpful information to users.
- Use Success (Green) to provide feedback to the user indicating an action is successful.
- Use Warning (Yellow) to indicate an unintended, but not dangerous, effect.
- Use Danger (Red) to indicate an action will cause data loss, error, or other hard-to-reverse effects.
- Use the icons provided for each Alert type.
When writing Alerts, keep the following in mind:
- Be clear and specific.
- Use Plain Language, not technical jargon.
- Do not blame the user.
- Avoid negative language.
- Avoid using all uppercase letters unless you are using Acronyms.
- Provide useful information.
- See Voice and Tone for more information.
See the Pen Alerts by LA Gov Design Team (@lagovdesignteam) on CodePen.