Alert

Notices and feedback messages using ARIA roles — no classes required.

Status

Use role="status" for non-critical updates that should be announced politely to assistive technology.

Your changes have been saved.

<div role="status">
  Your changes have been saved.
</div>

Alert

Use role="alert" for important, time-sensitive messages.

Connection lost. Trying to reconnect…

<div role="alert">
  Connection lost. Trying to reconnect…
</div>

Note

Tip: prefer semantic HTML and ARIA attributes over utility classes.

<div role="note">
  Tip: prefer semantic HTML and ARIA attributes over utility classes.
</div>

Danger Variant

Include error, danger, or warning in the aria-label to get the danger surface.

Payment failed. Please check your card details.

Your trial ends in 3 days.

<div role="alert" aria-label="error">
  Payment failed. Please check your card details.
</div>

<div role="alert" aria-label="warning">
  Your trial ends in 3 days.
</div>

With Rich Content

Update available

Version 1.2.0 is ready. Refresh to get the latest styles.

<div role="status">
  <strong>Update available</strong>
  <p>Version 1.2.0 is ready. Refresh to get the latest styles.</p>
</div>