Tag

Use tags to show compact metadata values with optional media, badges, and remove actions.

Overview

Use .tag for one inline tag item. The base style supports text and an optional .btn-close remove action.

Label

<span class="tag"> Label <a href="#" class="btn-close"
    aria-label="Remove label"></a> </span>

Variants

With icon

Use .tag-icon for a leading icon inside a tag. The icon uses compact size and secondary text color.

Featured

<span class="tag">
  <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
    focusable="false" class="icon tag-icon icon-2">
    <path
      d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
  </svg> Featured <a href="#" class="btn-close"
    aria-label="Remove featured tag"></a> </span>

With avatar, flag, or payment

Use .tag-avatar, .tag-flag, or .tag-payment to add media at the start of the tag. These classes keep spacing aligned with tag content.

AP Alex P. United States Visa

<div class="tags-list">
  <span class="tag">
    <span class="avatar avatar-xs tag-avatar">AP</span>
    Alex P.
    <a href="#" class="btn-close" aria-label="Remove Alex tag"></a>
  </span>
  <span class="tag">
    <span class="flag flag-xxs flag-country-us tag-flag"></span>
    United States
    <a href="#" class="btn-close" aria-label="Remove country tag"></a>
  </span>
  <span class="tag">
    <span class="payment payment-xxs payment-provider-visa tag-payment"></span>
    Visa
    <a href="#" class="btn-close" aria-label="Remove payment tag"></a>
  </span>
</div>

With badge

Use .tag-badge for small numeric or status counters. The badge variant keeps compact padding for tag layout.

Notifications 12

<span class="tag"> Notifications <span class="badge tag-badge">12</span> <a
    href="#" class="btn-close" aria-label="Remove notifications tag"></a>
</span>

With checkbox

Use .tag-check on a checkbox when the tag should be selectable. This variant is useful for filter sets and selectable labels.

Selected

<span class="tag"> <input type="checkbox" class="form-check-input tag-check"
    checked /> Selected <a href="#" class="btn-close"
    aria-label="Remove selected tag"></a> </span>

Examples

Tags list

Use .tags-list for groups of tags. It applies consistent spacing and wrapping between items.

Alpha Beta Gamma Delta

<div class="tags-list">
  <span class="tag">Alpha <a href="#" class="btn-close"
      aria-label="Remove alpha tag"></a></span>
  <span class="tag">Beta <a href="#" class="btn-close"
      aria-label="Remove beta tag"></a></span>
  <span class="tag">Gamma <a href="#" class="btn-close"
      aria-label="Remove gamma tag"></a></span>
  <span class="tag">Delta <a href="#" class="btn-close"
      aria-label="Remove delta tag"></a></span>
</div>

Accessibility

Keep tag labels short and meaningful.
Add aria-label to every close button action.
Keep selectable tags keyboard reachable when using .tag-check.
Ensure icon or media tags still include readable text.

Edit this page on GitHub

Tag