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.
Variants
With icon
Use .tag-icon for a leading icon inside a tag. The icon uses compact size and secondary text color.
<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.
<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.
<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.
<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.
<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-labelto every close button action. - Keep selectable tags keyboard reachable when using
.tag-check. - Ensure icon or media tags still include readable text.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
tag | component | Container element |
tag-avatar | part | Avatar at the start of the tag |
tag-flag | part | Country flag at the start of the tag |
tag-payment | part | Payment provider logo at the start of the tag |
tag-icon | part | Icon slot inside the tag |
tag-check | part | Checkbox inside the tag, for a removable filter |
tag-badge | part | Badge appended to the tag |
tag-list | part | Wrapper that spaces several tags in a row |
CSS
Variables
The component uses local CSS variables
on .tag for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_tags.scss.
--tag-height: #{$tag-height};
--tag-padding-x: #{$tag-padding-x};
--tag-gap: #{$tag-gap};
--tag-close-margin-end: #{$tag-close-margin-end};
--tag-close-margin-start: #{$tag-close-margin-start};
--tag-close-size: #{$tag-close-size};
--tag-close-font-size: #{$tag-close-font-size};
--tag-addon-margin-start: #{$tag-addon-margin-start};
--tag-icon-margin-end: #{$tag-icon-margin-end};
--tag-icon-size: #{$tag-icon-size};
--tag-check-size: #{$tag-check-size};Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.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;
