Badge

Small inline labels for counts and statuses. Pick a tone with data-tone.

Variants

Neutral Info Success Warning Danger

Live example

<div class="row">
  <span class="re-badge">Neutral</span>
  <span class="re-badge" data-tone="info">Info</span>
  <span class="re-badge" data-tone="success">Success</span>
  <span class="re-badge" data-tone="warning">Warning</span>
  <span class="re-badge" data-tone="danger">Danger</span>
</div>

Inline

Notifications 3

Live example

<p>Notifications <span class="re-badge" data-tone="danger">3</span></p>

Accessibility

• Semantics — a badge is a plain <span> with no role or ARIA, so its text content is its accessible name. The label is read inline with surrounding text (e.g. “Notifications 3”); it isn’t a focusable or interactive control, so there’s no keyboard model.
• Notes — data-tone only tints the badge via dedicated surface/text token pairs (sized for contrast in both themes); meaning is always carried by the visible label, never by color alone. If a count needs live updates, announce it from the surrounding context (e.g. an aria-live region), since the badge itself isn’t announced on change. See the accessibility guide.