Components · 데이터

Chip · Badge (칩·배지)

항목을 분류·필터하는 조작형 태그(Chip)와 상태·속성을 짧게 알리는 라벨(Badge)을 한 문서로 묶는다. 둘 다 정보를 최소 단위로 압축한다.

정의

칩은 항목을 분류·필터하는 조작 가능한 태그, 배지는 상태·속성을 짧게 알리는 비조작 라벨로, 정보를 한 단어 크기로 압축해 보여 주는 컴포넌트다.

Anatomy

부위	토큰
① 칩 컨테이너	bg `--chip-bg` · 모서리 `--chip-radius`(풀 라운드) · 패딩 `--chip-pad-y`/`--chip-pad-x`
② 라벨	`--chip-fg` · `--text-caption`
③ 삭제 아이콘(선택)	라인 SVG `stroke="currentColor"`, 히트영역 `--target-min`
④ 배지	bg `--badge-bg` · fg `--badge-fg` · 모서리 `--badge-radius` · 숫자·라틴은 `--font-family-display`

변형

컴포넌트	변형	용도
Chip	정적	분류 태그를 표시만 함(포커스 안 받음)
Chip	선택형(필터)	클릭으로 on/off, 선택 시 브랜드 필
Chip	삭제형	× 아이콘으로 적용한 필터를 제거
Badge	기본	중립 상태 라벨(NEW·기본, 틸 톤)
Badge	상태	success·warning·danger 의미색(재고·주문·품절)

상태

상태	Chip(정적)	Chip(선택형)	Badge
Default	bg `--chip-bg` / fg `--chip-fg`	동일(미선택)	bg `--badge-bg` / fg `--badge-fg`
Hover	—	bg `--color-gray-200`	해당 없음(비조작)
Selected	—	bg `--color-brand-primary` / fg `--color-text-on-brand`	—
Focus	—	`box-shadow: var(--focus-ring)`	—
Disabled	—	`opacity: var(--opacity-disabled)` + `cursor: not-allowed`	—

Do / Don't

Chip은 1~2단어 분류 라벨로만 쓴다 — "노면표시재", "안전표지"처럼 짧게.
필터로 쓰는 Chip은 선택 상태를 색·모양 둘 다로 드러낸다(브랜드 필 + aria-pressed).
Badge 상태색은 의미와 일치시킨다(품절=danger, 재고=success).

Don't

Chip·Badge에 문장이나 설명을 넣지 말 것 — 길어지면 Callout·목록으로.
Badge를 클릭 대상으로 만들지 말 것 — 조작이 필요하면 Chip이나 Button을 쓴다.
의미 없는 알록달록한 Badge를 남발하지 말 것 — 상태색은 절제한다.

콘텐츠 규칙

Chip·Badge 라벨은 1~2단어 명사(체언)로 — 문장·서술어 금지.
길이 상한: Chip은 8자, Badge는 6자 안. 넘으면 축약하거나 다른 컴포넌트로.
Badge 숫자는 아라비아 숫자, 두 자리를 넘으면 "99+"로 축약한다.
인증 배지는 검증된 사실만 — "GREENGUARD GOLD", "KC"만 쓰고 미보유 인증 라벨은 금지.

키보드 인터랙션

키	동작
`Tab`	선택형·삭제형 Chip으로 포커스 이동(정적 Chip·Badge는 포커스를 받지 않음)
`Enter` / `Space`	선택형 Chip 선택 on/off 토글
`Backspace` / `Delete`	삭제형 Chip 제거(포커스가 해당 Chip에 있을 때)

접근성

정적 Chip·Badge는 텍스트로 의미를 전달한다 — 색만으로 상태를 표현하지 않는다(색 + 텍스트).
선택형 Chip은 <button> + aria-pressed로 선택 상태를 노출한다. 삭제 버튼은 aria-label="○○ 제거".
상태 Badge의 --badge-fg on --badge-bg는 대비 AA 확보값 — danger·success 상태는 아이콘·텍스트를 함께 써 색맹에 대비한다.
조작형 Chip·삭제 아이콘의 히트영역은 ≥ --target-min(44px). 기준: ../guidelines/accessibility.md.

코드

노면표시재 디자인구독

NEW 재고 있음 주문 제작 품절

html

<div class="pi-chip-row">
  <span class="pi-chip">노면표시재</span>
  <button class="pi-chip pi-chip--selectable" type="button" aria-pressed="true">안전표지</button>
  <button class="pi-chip pi-chip--selectable" type="button" aria-pressed="false">직물시트</button>
  <span class="pi-chip pi-chip--removable">디자인구독<button class="pi-chip__remove" type="button" aria-label="디자인구독 필터 제거"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></button></span>
</div>
<div class="pi-chip-row">
  <span class="pi-badge">NEW</span>
  <span class="pi-badge pi-badge--success">재고 있음</span>
  <span class="pi-badge pi-badge--warning">주문 제작</span>
  <span class="pi-badge pi-badge--danger">품절</span>
</div>

css

.pi-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pi-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border: var(--border-thin) solid transparent;
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font: var(--text-caption);
  letter-spacing: var(--text-caption-letter-spacing);
  word-break: keep-all;
}
button.pi-chip, .pi-chip--selectable {
  min-height: var(--target-min); cursor: pointer;
  transition: background var(--duration-base) var(--easing-out),
              color var(--duration-base) var(--easing-out);
}
.pi-chip--selectable:hover { background: var(--color-gray-200); }
.pi-chip--selectable:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pi-chip--selectable[aria-pressed="true"] { background: var(--color-brand-primary); color: var(--color-text-on-brand); }
.pi-chip--selectable:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pi-chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--target-min); min-height: var(--target-min);
  margin: 0 calc(var(--space-2) * -1) 0 0;
  padding: 0; border: none; background: none; color: inherit; cursor: pointer;
}
.pi-chip__remove:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-full); }

.pi-badge {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--badge-radius);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lh-tight);
  word-break: keep-all;
}
.pi-badge--success { background: var(--color-state-success-bg); color: var(--color-state-success-fg); }
.pi-badge--warning { background: var(--color-state-warning-bg); color: var(--color-state-warning-fg); }
.pi-badge--danger { background: var(--color-state-danger-bg); color: var(--color-state-danger-fg); }

@media (prefers-reduced-motion: reduce) { .pi-chip--selectable { transition: none; } }

Changelog

날짜	변경
2026-07-15	문서 계약(10섹션) 적용 — Anatomy 도해·선택형/삭제형 Chip 상태·상태 Badge 색·콘텐츠 규칙·코드 신설, 기존 규격 승계