Tags

Styles live in scss/components/_tag.scss. Tags are compact labels for filters, metadata, or status. Use static variants for read-only chips, and interactive tags as toggle buttons with aria-pressed.

Static tags

Semantic backgrounds with optional leading icon. Disabled uses .tag--disabled on a <span> (not interactive).

<span class="tag tag--information"><span class="tag__icon" aria-hidden="true">…</span><span class="tag__label">Draft</span></span>

Interactive tags

Dashed border when unselected; solid fill when selected (.tag--interactive-selected). The plus icon hides when selected and a dismiss icon appears.

Filter chips (live)

Click tags to toggle selection. Each control is a <button class="tag tag--interactive"> with aria-pressed (data-tags-live wires the demo).

<div role="group" aria-label="Filters" data-tags-live=""><button type="button" class="tag tag--interactive" aria-pressed="false">
    <span class="tag__label">Design</span>
  </button><button type="button" class="tag tag--interactive tag--interactive-selected" aria-pressed="true">
    <span class="tag__label">Accessibility</span>
  </button></div>

JavaScript

import { wireAllTags } from './tag-behavior';

wireAllTags();

Class reference

Customize (Sass)

1. 01

   Tag spacing

   Adjust padding, gap, and icon size for denser toolbars.
   variables

   @use "pimentcss-design-system" with (
     $tag-gap: 0.25rem,
     $tag-padding-x: 0.5rem,
     $tag-icon-size: 1rem
   );

2. 02

   Rebuild CSS

   Run after editing _tag.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps