Tag

Compact labels for filters and metadata. Add data-re-dismissible with a data-re-dismiss button to make a tag removable.

Variants

Neutral Info Success Warning Danger

Live example

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

Removable

Design × Engineering ×

Live example

<div class="row" id="filters">
  <span class="re-tag" data-re-dismissible>
    Design
    <button class="re-tag__remove" type="button" data-re-dismiss aria-label="Remove Design">
      ×
    </button>
  </span>
  <span class="re-tag" data-re-dismissible>
    Engineering
    <button
      class="re-tag__remove"
      type="button"
      data-re-dismiss
      aria-label="Remove Engineering"
    >
      ×
    </button>
  </span>
</div>

Accessibility

• Semantics — the tag is a plain <span class="re-tag">; tones (data-tone) are decorative styling only, so any meaning they carry must also be in the text. A removable tag adds a native <button data-re-dismiss> with an aria-label (e.g. Remove Design) so the action is announced even though the × glyph isn’t descriptive.
• Keyboard — a plain tag is not focusable. The remove button is a native button: Tab to focus, Enter or Space to activate. Activating it hides the tag and dispatches a cancelable re-dismiss event (see Removable).
• Focus — the remove button shows a visible :focus-visible ring.

See the accessibility guide for project-wide conventions.