Alerts
Overview
Alerts provide important prompts within a user flow and are used to ensure users notice and act on critical information. Alerts communicate status, feedback, or required attention without interrupting the user’s task.
Alerts should be used sparingly and consistently to maintain their effectiveness.
Guidelines
Dos
- Use alerts to communicate important status updates or required user actions.
- Limit each page to one (1) alert at a time.
- Place alerts at the top of the page, directly below the page header.
- Keep alert content to a single line of text whenever possible.
- Use clear, concise language that communicates the message quickly.
- Use color to indicate the level of importance or urgency.
Don’ts
- Don’t display more than one alert on a single page.
- Don’t place alerts mid-page or inline with other content.
- Don’t use alerts for non-critical or decorative messaging.
- Don’t use multi-line or paragraph-style alert messages.
Content rules
Alerts should contain text only, with an optional single hyperlink when necessary.
- If a link is used, it should provide supporting information or a next step.
- Keep language concise and actionable.
Placement
- Alerts must appear at the top of the page or modal, directly below the page or modal header.
- Alerts should be immediately visible without scrolling.
Variants
| Variant | Description | Example Use |
|---|---|---|
| Primary | Highlights a key message or call to attention using the primary brand color | Featured announcements, branded prompts |
| Success | Indicates successful completion of an action or event | Changes saved, action completed |
| Info | Conveys helpful or relevant information that is not critical | Informational notices |
| Warning | Alerts users to signal potential issues or recommended actions | Missing data, pending actions |
| Error | Indicates a critical issue or error has occurred | Failed submission, system error |