Component
Chip
Stable태그·필터·뱃지 등 작은 상태/카테고리 표시 단위.
01 Preview
실제 모습.
default active +12
Filter chips — pressed prop이 자동으로 aria-pressed 부여
02 Rationale
왜 이렇게 만들었나.
- Span과 button 두 역할을 한 컴포넌트로 묶었습니다. 같은 시각, 다른 의미.
- Variant 3개. 색 폭증을 막기 위해 active/default/muted만 둡니다.
- Radius는 가장 작은 sm. Pill보다 정보 밀도가 우선입니다.
- Astro is:global을 씁니다. JS가 동적 생성하는 +N 뱃지에도 같은 스타일이 갑니다.
03 Anatomy
어떻게 구성되는가.
- 01 Container — radius-sm, border 1px
- 02 Label — 13px, 600 weight, 단일 행
- 03 Optional: as="button"인 경우 cursor pointer + hover/focus 상태
04 Props
속성.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "active" | "muted" | default | 회색 / primary 강조 / 더 흐림 |
as | "span" | "button" | span | span: 표시용 / button: 클릭 가능 |
05 Usage
가져다 쓰기.
import Chip from '@/components/Chip.astro'; 06 Accessibility
접근성 체크리스트.
- as="button"일 때만 키보드 탐색 가능
- 필터 chip에는 aria-pressed로 토글 상태 표시
- 단순 라벨이면 span 유지 (스크린리더 노이즈 최소화)
07 Decision
언제 쓰고, 언제 쓰지 않는가.
When to use
- 글의 카테고리/태그 표시
- 필터 토글
- +N 형태의 보조 카운터
When not to
- 주요 액션 — Button
- 본문 강조 — strong/em
- 여러 줄에 걸친 라벨
08 States
변형별 시각.
variant 3종 × as 2종. button으로 쓸 때만 hover/focus가 활성.
| Variant | as="span" | as="button" (idle) | as="button" (focus) |
|---|---|---|---|
| default | default | default chip, focused state (visual demo) | |
| active | active | active chip, focused state (visual demo) | |
| muted | +12 | muted chip, focused state (visual demo) |
09 Related