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

Re-point the tokens to re-skin, or use data-case for the one-off. Never
override the class from a consuming stylesheet — that is Layer Rule 3. Tag
otherwise references system tokens directly.

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>

Case

A tag uppercases by default, which suits a short fixed label. data-case="none"
turns that off and drops the tracking back to normal.

Reach for it whenever the tag carries content the tag does not control — an
identifier, a proper noun, a filename, a full sentence. Uppercasing is not
reversible by the reader: RoboCop and robocop render identically, a
case-sensitive id stops being copy-pasteable, and running prose set in capitals
is slower to read and is spelled out character by character by some
screen-reader configurations.

<span class="tag">Fixed label</span>
<span class="tag" data-case="none">Question ID: qA7f</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
• Set data-case="none" on any tag holding consumer-supplied text. The default
  uppercase is a display choice that suits a fixed label and destroys meaning in
  an identifier or a sentence — see Case

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
• Use data-case="none" for identifiers, proper nouns, and sentences

Don't

• Don't use tags as buttons. They are labels, not actions
• Don't use tags for navigation
• Don't override text-transform or letter-spacing from a consuming
  stylesheet. Re-point --tag-case / --tag-tracking, or use data-case

CSS reference

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

Styling

Selectors

Use in another product

The design system installs once per product:

npm install github:bydefaultstudio/design-system-dist#semver:^4.7.0

This component's styles ship in design-system.css. No JavaScript, nothing else to include.