칩

누르거나 지울 수 있는 인터랙티브 태그다. 필터·선택·바로가기처럼 사용자가 직접 다루는 라벨에 쓴다. color 는 의미가 아니라 강조 단계(subdued·base·strong)이고, 의미색이 필요한 상태 표시나 정적 라벨은 뱃지가 맡는다. 라벨은 1~3단어로 짧게, 줄바꿈 없이 좁으면 말줄임된다.

상태

subdued

base

strong

active

disabled

color 는 강조 단계(의미색 아님). 선택은 active(채운 표시). 의미색 상태는 뱃지.

활용 방법

북마크 바 (파비콘 + 카운트 + 선택)

image 로 파비콘, count 로 숫자, active 로 선택 상태를 표현한다. 칩을 눌러 활성 항목을 바꿔보자.

Preview

tsx

<Chip
  active={activeId === b.id}
  count={b.count}
  image={faviconUrl}        // 또는 icon={<Folder/>}
  onClick={() => setActiveId(b.id)}
>
  {b.label}
</Chip>

삭제 가능한 필터 태그

removable 을 주면 우측 X 가 생기고 onRemove 가 호출된다. 활성 필터를 칩으로 보여주고 지우는 패턴.

Preview

tsx

const [tags, setTags] = useState([...]);

<Chip removable onRemove={() => remove(t)}>
  {t}
</Chip>

아이콘 · 링크

icon 으로 의미를 보강하고, href 를 주면 <a> 로 렌더돼 바로가기가 된다.

Preview

YouTube

tsx

<Chip icon={<Tag size={13} />}>전자제품</Chip>
<Chip href="/yt" image={faviconUrl}>YouTube</Chip>

뱃지와 어떻게 다른가

· 칩: 사용자가 다루는 태그(필터·선택·바로가기). 누르고 지울 수 있고, color 는 강조 단계.
· 뱃지: 시스템이 부여하는 정적 상태(배송됨·품절). 색이 의미(success·danger).
· 정적 라벨이면 뱃지(neutral), 동작이 있으면 칩.

속성

이름	타입	기본값	설명
color	"subdued" \| "base" \| "strong"	"base"	강조 단계(중립: 의미색 아님)
active	boolean	false	선택/활성: 채운 선택 표시(필터 토글)
count	number	-	우측 카운트 숫자(예: 서버 7)
icon	ReactNode	-	선두 아이콘
image	string	-	선두 아이콘을 파비콘 이미지로: URL, 실패 시 라벨 첫 글자 폴백
onClick	(e) => void	-	클릭 핸들러
href	string	-	있으면 <a> 로 렌더(바로가기)
removable	boolean	false	우측 X 삭제 버튼 노출
onRemove	() => void	-	X 클릭 콜백
disabled	boolean	false	흐리게 + 상호작용 차단
children	ReactNode	-	라벨: 1~3단어 권장