Alert

Alerts provide timely feedback or status updates to users. They communicate information, success states, and errors in a consistent, accessible way.

Considerations

We use a simple <div class="alert"> structure with modifier classes (e.g., alert--success, alert--danger) so visual styling is predictable and easy to extend. Each alert includes an appropriate ARIA live-region role:

• role="status" for informational or success messages that should be announced politely.
• role="alert" for urgent or error messages that require immediate attention and announced assertively.

Using semantic roles instead of JavaScript-driven announcements ensures reliability across assistive technologies, keeps the component lightweight, and aligns with accessibility best practices.

Examples

Info, Success, and Error Alerts

<div class="alert" role="status">
  <p>We’ve been trying to reach you about your car’s extended warranty.</p>
</div>

<div class="alert alert--success" role="status">
  <p>We’ve been trying to reach you about your car’s extended warranty.</p>
</div>

<div class="alert alert--danger" role="alert">
  <p>We’ve been trying to reach you about your car’s extended warranty.</p>
</div>