Tag

Tags are small interactive labels used for categorisation, filtering, and metadata display. They support colour variants via data-color and can be dismissible with a remove button.

The .tag class is required. Colour variants use the data-color attribute — the same API as button and badge.

Anatomy

No component-level tokens — tag references system tokens directly (var(--background-darker), var(--border-faded), var(--radius-s)).

Basic usage

<span class="tag">Default tag</span>

Colour

data-color applies a semantic colour to background, border, and text.

<span class="tag" data-color="success">Success</span>
<span class="tag" data-color="warning">Warning</span>
<span class="tag" data-color="danger">Danger</span>
<span class="tag" data-color="info">Info</span>

Dismissible tag

Add a .tag-remove button inside the tag. Clicking it removes the tag from the DOM.

<span class="tag">
  Design
  <button class="tag-remove" aria-label="Remove Design tag" type="button">{{icon:close}}</button>
</span>

Tag group

Use .tag-group to wrap multiple tags with consistent spacing.

<div class="tag-group">
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  <span class="tag">JavaScript</span>
</div>

In context — active filters

JavaScript

Tag dismiss uses a simple inline event listener — no separate JS file needed:

document.addEventListener('click', function (e) {
  var removeBtn = e.target.closest('.tag-remove');
  if (removeBtn) {
    var tag = removeBtn.closest('.tag');
    if (tag) tag.remove();
  }
});

Accessibility

• The remove button must have aria-label describing what is being removed
• Tags are presentational — they don't require ARIA roles
• When used as filters, consider announcing removal to screen readers via a live region

Usage rules

Do

• Use tags for categorisation and filter indicators
• Use data-color to indicate state (success, warning, danger)
• Include aria-label on every remove button

Don't

• Don't use tags as buttons — they are labels, not actions
• Don't use tags for navigation

CSS reference

This section documents how the component is built. For usage, see the sections above.

Styling

Selectors