Components / Display & Media / Chip

Chip beta

A small labeled thing that can be removed, selected, or both — tags, filters, people.

Preview

Design Vanilla Accessibility Motion

<div class="k-chips" style="max-width:430px">
  <span class="k-chip" data-on>Design<button class="k-chip-x" type="button" aria-label="Remove tag Design"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></span>
  <span class="k-chip">Vanilla<button class="k-chip-x" type="button" aria-label="Remove tag Vanilla"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></span>
  <span class="k-chip">Accessibility<button class="k-chip-x" type="button" aria-label="Remove tag Accessibility"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></span>
  <span class="k-chip">Motion<button class="k-chip-x" type="button" aria-label="Remove tag Motion"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></span>
</div>

.k-chip{display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 7px 0 12px;border:1px solid var(--k-line);border-radius:99px;background:var(--k-bg);font-family:var(--k-font);font-size:12.5px;font-weight:500;color:var(--k-ink)}
.k-chip[data-on]{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-bg)}
.k-chip-x{width:19px;height:19px;border-radius:50%;border:none;background:var(--k-bg-soft);color:var(--k-ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.k-chip[data-on] .k-chip-x{background:rgba(255,255,255,.16);color:var(--k-bg)}
.k-chip-x:hover{color:var(--k-danger)}
.k-chips{display:flex;flex-wrap:wrap;gap:8px}

document.querySelectorAll('.k-chip-x').forEach(btn => {
  btn.addEventListener('click', () => btn.closest('.k-chip').remove());
});

Usage

For tag sets and active filters. Chips state what is in play and offer the way out (the ×); they are not buttons for primary actions.

Accessibility

The remove control is a real button with the chip name in its label ("Remove tag Design"), so removing never depends on sight.

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Card beta

The universal container: a hairline box with a header, a body and a footer that agree with each other.

containerpanel

Carousel

Data Table