Tag

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

Figma 컴포넌트: Base components/Tags

Subtle (기본) — action이 없는 텍스트 전용 태그. #fcfcfd 배경 + 알파 검정 3% 보더
Brand — action="close" 또는 action="count"이고 checkbox가 없을 때. #e6d4ff 브랜드 연보라 배경 + #5200b0 보라 텍스트
Checkbox variant — checkbox prop이 있을 때. #f3f4f6 회색 배경 + #d2d6db 뚜렷한 보더

Basic Tags

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

LabelDesignSystem

LabelDesign

Label5Design12

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

SmallMediumLarge

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

LabelLabelLabel5

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

Olivia

Phoenix

Lana2

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

Korea

United States

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"일 때 표시할 숫자
`avatarSrc`	string	`-`	icon="avatar"일 때 표시할 이미지 URL
`flagSrc`	string	`-`	icon="country"일 때 표시할 국기 이미지 URL
`onClose`	() => void	`-`	닫기 버튼 클릭 핸들러
`onCheck`	() => void	`-`	체크박스 클릭 핸들러
`children`	ReactNode	`-`	태그 레이블 텍스트