Labels

Badge

Use badges for status labels, counts, or short categorical descriptors. Five semantic variants map directly to brand status colors.

<span class="badge">Default</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--error">Error</span>
<span class="badge badge--info">Info</span>

With dot indicator

<span class="badge badge--success badge--dot">Published</span>

Chip

Use chips for filter controls, multi-select options, or attribute labels. The chip--selected class shows the active state; in a real implementation toggle it via JavaScript on click.

<!-- Selected state -->
<button type="button" class="chip chip--selected" aria-pressed="true">Design</button>

<!-- Unselected -->
<button type="button" class="chip" aria-pressed="false">Engineering</button>

<!-- Disabled -->
<button type="button" class="chip" disabled>Archived</button>

With leading icon

<button type="button" class="chip chip--selected" aria-pressed="true">
  <svg ...></svg>
  Approved
</button>

Tag

Tags label content items — applied by a user or system. Use the dismiss variant when the tag is removable. Tags are not interactive by default; wire up the dismiss button to remove the tag from the DOM.

<span class="tag">Design system</span>

Dismissible

<span class="tag tag--dismiss">
  Design system
  <button type="button" class="tag-dismiss" aria-label="Remove Design system tag">
    <svg ...></svg>
  </button>
</span>

With leading icon

<span class="tag tag--icon">
  <svg ...></svg>
  Featured
</span>

<!-- Icon + dismissible -->
<span class="tag tag--icon tag--dismiss">
  <svg ...></svg>
  Removable
  <button type="button" class="tag-dismiss" aria-label="Remove Removable tag">
    <svg ...></svg>
  </button>
</span>