Chip

Filters and tags

<div class="dsgn-chip-group" role="group" aria-label="Status filter">
  <button class="dsgn-chip" aria-pressed="true">Overdue</button>
  <button class="dsgn-chip" aria-pressed="false"><span class="dsgn-icon" aria-hidden="true">schedule</span>Due soon</button>
  <button class="dsgn-chip" aria-pressed="false">Paid</button>
</div>
<div class="dsgn-chip-group" aria-label="Tags">
  <span class="dsgn-chip">retainer<button type="button" class="dsgn-field-button dsgn-chip-remove" aria-label="Remove retainer"><span class="dsgn-icon" aria-hidden="true">close</span></button></span>
</div>

Usage

Filter chips (dsgn.js flips aria-pressed on click):

Removable tag (the app removes it; move focus to the next tag or the input):

Same height as every control (line-height + 2 × pad-y), tighter sides (space-12). Pressed = accent tint, accent ring and a leading check (drawn by CSS, so a pressed chip never relies on colour alone). Corners follow radius-m.

Details

Classes

.dsgn-chip-group .dsgn-chip .dsgn-icon .dsgn-chip-remove

Tokens used

--dsgn-border --dsgn-border-control --dsgn-border-width --dsgn-control-font-size --dsgn-control-line-height --dsgn-control-pad-y --dsgn-control-solid --dsgn-control-subtle --dsgn-control-subtle-hover --dsgn-control-text --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-icon --dsgn-font-sans --dsgn-font-weight-medium --dsgn-icon-grade --dsgn-neutral-subtle --dsgn-neutral-subtle-hover --dsgn-radius-m --dsgn-shadow-control --dsgn-space-12 --dsgn-space-4 --dsgn-space-8 --dsgn-surface-raised --dsgn-text --dsgn-text-disabled --dsgn-text-muted

In Figma

Chip

Import alone

dsgn.systems/components/chip.css