Skip to content
Relements Relements

Alert

Status message blocks. Add role="status" or role="alert" for announcement; add data-re-dismissible to make one closable.

Variants

Section titled “Variants”

Heads up

This is an informational message.

Saved

Your changes are live.

Check your input

Some fields need attention.
Live example
<div class="stack">
  <div class="re-alert" role="status">
    <div class="re-alert__content">
      <p class="re-alert__title">Heads up</p>
      This is an informational message.
    </div>
  </div>
  <div class="re-alert" data-tone="success" role="status">
    <div class="re-alert__content">
      <p class="re-alert__title">Saved</p>
      Your changes are live.
    </div>
  </div>
  <div class="re-alert" data-tone="warning" role="status">
    <div class="re-alert__content">
      <p class="re-alert__title">Check your input</p>
      Some fields need attention.
    </div>
  </div>
  <div class="re-alert" data-tone="danger" role="alert">
    <div class="re-alert__content">
      <p class="re-alert__title">Something went wrong</p>
      We couldn't save your changes.
    </div>
  </div>
</div>

Dismissible

Section titled “Dismissible”

Tip

You can close this alert.
Live example
<div class="re-alert" role="status" data-re-dismissible id="dismissible-alert">
  <div class="re-alert__content">
    <p class="re-alert__title">Tip</p>
    You can close this alert.
  </div>
  <button type="button" class="re-alert__dismiss" data-re-dismiss aria-label="Dismiss">
    ×
  </button>
</div>

Accessibility

Section titled “Accessibility”
  • Keyboard — The alert block isn’t focusable; it’s a passive message. When dismissible, the dismiss control is a native <button>, so Tab reaches it and Enter/Space activate it. enhanceDismissible listens for those same keys (and click), so the button works with or without the script.
  • Focus — The dismiss button shows a visible :focus-visible ring (--re-shadow-focus); the default outline is replaced, not removed.
  • Semantics — The host carries an author-supplied live-region role: role="status" (polite) for info/success/warning, or role="alert" (assertive) for danger. Assistive tech announces the content when it appears or changes — status waits for a pause, alert interrupts. The .re-alert__title is a plain paragraph (visual emphasis only, not a heading). The dismiss button needs an accessible name; the example uses aria-label="Dismiss" since the × glyph isn’t descriptive.
  • Notes — Dismissing sets hidden on the alert, removing it from the accessibility tree; it also dispatches a cancelable re-dismiss event if you need to keep it visible. Tones are conveyed by color and the title text, not by role alone — don’t rely on color to carry the meaning. See the accessibility guide.