# Tag

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

Build inline tag elements with the tag class API and related tag part classes.

Source: https://docs.tabler.io/ui/components/tag

---

## Overview

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

```html
<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.

```html
<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">
    <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.

```html
<div class="tag-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.

```html
<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.

```html
<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

### Tag list

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

```html
<div class="tag-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.

## SCSS variables

Use these SCSS variables to customize tags. The default values are:

```scss
$tag-height: 1.5rem;
$tag-padding-x: 0.5rem;
$tag-gap: 0.5rem;
$tag-close-margin-end: -0.25rem;
$tag-close-margin-start: -0.125rem;
$tag-close-size: 1rem;
$tag-close-font-size: 0.5rem;
$tag-badge-padding-y: 0.125rem;
$tag-badge-padding-x: 0.25rem;
$tag-badge-margin-end: -0.25rem;
$tag-addon-margin-start: -0.25rem;
$tag-icon-margin-end: -0.125rem;
$tag-icon-size: 1rem;
$tag-check-size: 1rem;
```

_Source: `core/scss/_variables.scss`_