Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Action chips

A row of small buttons above a list that narrow it down or fire a short action — built for more options than the screen is wide.

Actions

Live preview

Source

<div class="dc-chipwrap">
  <div class="dc-chips" role="group" aria-label="공종으로 걸러보기">
    <button class="dc-chip" type="button" aria-pressed="true">전체</button>
    <button class="dc-chip" type="button" aria-pressed="false">철근</button>
    <button class="dc-chip" type="button" aria-pressed="false">용접</button>
    <button class="dc-chip" type="button" aria-pressed="false">도장</button>
    <button class="dc-chip" type="button" aria-pressed="false">전기</button>
  </div>
  <p class="dc-chipwrap__note">지금 걸려 있는 조건이 줄 맨 앞에 보이도록 둡니다.</p>
</div>
.dc-chipwrap {
  padding: var(--dc-4) 0;
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-chips {
  display: flex;
  gap: var(--dc-2);
  padding: 0 var(--dc-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.dc-chips::-webkit-scrollbar { display: none; }
.dc-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--dc-1);
  min-height: 44px;
  padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-bold);
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dc-fast), border-color var(--dc-fast), color var(--dc-fast);
}
button.dc-chip:hover { background: var(--dc-sunken); }
.dc-chip[aria-pressed="true"] {
  border-color: var(--dc-brand);
  background: var(--dc-brand-soft);
  color: var(--dc-brand-text);
}
.dc-chip__ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.dc-chip--tag {
  padding-right: 0;
  border-style: dashed;
  cursor: default;
}
.dc-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  align-self: stretch;
  margin-left: var(--dc-1);
  border: 0;
  border-radius: 0 var(--dc-r-full) var(--dc-r-full) 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.dc-chip__x:hover { background: var(--dc-sunken); }
.dc-chipwrap__note {
  margin: var(--dc-3) 0 0;
  padding: 0 var(--dc-4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dc-text-mute);
}

How to use it

  • Keep the active condition first in the row so it is visible without scrolling sideways
  • Nouns for chips that select, verbs for chips that act; never mix the two in one row
  • When the row overflows, scroll it sideways rather than wrapping, and let the cut-off edge show

Watch out for

  • Selection chips need aria-pressed; color alone tells a screen reader nothing
  • Let the remove button span the chip's full height so a finger can land on it
  • Sideways scroll alone is not keyboard reachable — each chip must be a tab stop

Next