Chip

짧은 라벨/필터/선택지를 표현하는 작은 액션 토큰. 이전 이름은 Tag.

사용

import { Chip } from "@fluxloop-ai/pds-ui/components/chip";

<Chip size="small">필터</Chip>
<Chip size="small" interactive active onClick={() => {}}>선택됨</Chip>
<Chip size="small" variant="outlined" leadingContent={<Hash />}>tag</Chip>

Size

radius/padding/typography 가 사이즈별로 비례.

size	radius	padding (y/x)	gap	text	icon
xsmall	6px	4 / 7	2px	caption2 (10px)	12px
small	8px	6 / 8	2px	label2 (12px)	14px
medium	8px	7 / 11	3px	label1 (13px)	14px
large	10px	9 / 12	3px	label1 (13px)	16px

Variant

solid 와 outlined 두 종류. active 상태에서 solid 가 outlined 보다 높은 위계를 가짐.

• solid: bg --pds-fill-alternative → active 시 --pds-inverse-background / --pds-inverse-label
• outlined: 1px --pds-line-normal-neutral → active 시 보더만 --pds-primary-normal 43% 로 강조 + 텍스트 --pds-primary-normal (배경은 투명 유지)

Toggle (active + interactive)

칩 본체를 클릭 가능하게 하려면 interactive 를 켜서 <button> 으로 렌더. active 를 함께 주면 aria-pressed 와 data-active 가 연결됨.

Removable (trailing slot)

칩을 비인터랙티브(<span>, 기본값)로 두고 trailingContent 자리에 닫기 버튼을 직접 배치. 본체가 button 이 아니므로 trailing 의 <button> 이 안전하게 중첩 없이 들어감.

Props

Prop	타입	기본	설명
size	xsmall | small | medium | large	medium
variant	solid | outlined	solid
interactive	boolean	false	true 면 <button> 으로 렌더. 기본 <span> 이라 trailing 에 별도 버튼을 둘 수 있음
active	boolean	-	시각 상태. interactive 일 때 aria-pressed 도 연결
leadingContent	ReactNode	-	텍스트 앞 (보통 아이콘/아바타)
trailingContent	ReactNode	-	텍스트 뒤 (제거 버튼/카운트 등)
disabled	boolean	-	interactive 일 때 disabled, 아니면 aria-disabled 로 노출
asChild	boolean	-	루트를 <a> 등으로 교체

Registry 설치

npx shadcn add https://pds.pluto.com/r/chip