Chip

The .pl-c-chip is a compact tag/pill with an optional remove button. Default tone uses relative color syntax (oklch(from var(--pl-color-accent) ...)) to derive a tinted background from the accent token. Falls back to color-mix() where relative color syntax is unsupported.

Semantic HTML

<!-- Static chip -->
<span class="pl-c-chip">Label</span>

<!-- Removable chip -->
<span class="pl-c-chip" data-tone="success">
  Active
  <button class="pl-c-chip__remove" aria-label="Remove">x</button>
</span>

<!-- Group -->
<div class="pl-c-chip-group">
  <span class="pl-c-chip">Tag 1</span>
  <span class="pl-c-chip">Tag 2</span>
</div>

Class contract