Alerts

Notify users of an important change or new piece of information

Usage

Usability Guidance

• Use alerts to validate steps taken by users or denote a system change.
• Use alerts sparingly. Show one at a time to avoid overwhelming users.
• Be polite and encouraging, and inform users how to respond to or fix a problem.

Accessibility Requirements

• Design alerts to visually contrast with surrounding content.
• Use a high-contrast outline or background color and an icon for high visibility.
• Use the ARIA role="alert" to notify assistive technology of time-sensitive information.

Further Reading

• Using the alert role

Primary Alert

Anatomy

1. Alert Copy (required)
2. Container (required)

Specs

Code

Secondary Alert

Anatomy

1. Alert Copy (required)
2. Container (required)

Specs

Code

Success Alert

Anatomy

1. Alert Copy (required)
2. Success Icon (required)
3. Container (required)

Specs

Code

Error Alert

Anatomy

1. Alert Copy (required)
2. Error Icon (required)
3. Container (required)

Specs

Code

Warning Alert

Anatomy

1. Alert Copy (required)
2. Warning Icon (required)
3. Container (required)

Specs

Code