칩

누르거나 지울 수 있는 Muse의 인터랙티브 태그다. 주제 필터·컬렉션·바로가기처럼 독자가 직접 다루는 라벨에 쓴다. 색은 의미가 아니라 강조 단계이고, 정적 상태 표시는 뱃지 계열에 맡긴다.

상태

subdued

base

strong

active

disabled

color 는 강조 단계(의미색 아님). 선택은 active 로 제어한다.

active 로 선택 상태를 표현하고, removable 로 우측 삭제 버튼을 붙인다.

Preview

tsx

<Chip active={selected === tag} onClick={() => setSelected(tag)}>
  {tag}
</Chip>

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

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

Preview

tsx

<Chip icon={<Tag size={13} />}>Culture</Chip>
<Chip href="/archive" icon={<Bookmark size={13} />} count={7}>Archive</Chip>