Tag

태그(Tag, Chip)는 사용자가 정보를 입력하거나, 선택하거나, 콘텐츠를 필터링하거나, 액션을 트리거할 수 있는 컴팩트한 요소입니다. 배지(Badge)와 유사하지만, 주로 입력 필드 안에서 여러 항목을 선택할 때 사용됩니다.

Figma 컴포넌트: Base components/Tags

Basic Tags

가장 기본적인 태그입니다. 텍스트만 표시합니다.

LabelDesignSystem

LabelDesign

Label5Design12

3가지 크기를 제공합니다: sm, md, lg.

SmallMediumLarge

icon="dot" - 상태 표시 점을 추가합니다.

LabelLabelLabel5

icon="avatar" - 아바타 아이콘을 표시합니다.

LabelLabelLabel2

icon="country" - 국기 아이콘을 표시합니다.

LabelLabel

checkbox prop으로 체크박스를 추가합니다. 다중 선택 필터에 활용합니다.

UncheckedChecked

With CloseChecked + Close

With DotChecked + Dot

Prop	Type	Default	Description
`size`	sm \| md \| lg	`md`	태그 크기
`icon`	dot \| avatar \| country	`-`	좌측 아이콘 종류
`action`	close \| count	`-`	우측 액션 (닫기 버튼 또는 카운트 배지)
`checkbox`	boolean	`false`	체크박스 표시 여부
`checked`	boolean	`false`	체크박스 선택 상태
`countValue`	number	`5`	action="count"일 때 표시할 숫자
`onClose`	() => void	`-`	닫기 버튼 클릭 핸들러
`onCheck`	() => void	`-`	체크박스 클릭 핸들러
`children`	ReactNode	`-`	태그 레이블 텍스트