Tag

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

Tokens

Basic usage

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

Variants

<span class="tag tag--success">Success</span>
<span class="tag tag--warning">Warning</span>
<span class="tag tag--danger">Danger</span>
<span class="tag tag--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 notes

• 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

Do / Don't

Do:

• Use tags for categorisation and filter indicators
• Use status variants 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