Action

Label

상태, 카테고리, 태그 등을 표현하는 소형 인라인 라벨 컴포넌트입니다. 7가지 색상, pill/사각 모양, 채움/아웃라인/고스트 스타일, 아이콘 전용 뱃지 모드를 지원합니다.

import { Label } from "@/shared/ui/common/action"

인터랙티브 데모

Label

Color

round

fill

outline

iconOnly

leftIcon

rightIcon

tsx

<Label
  fill
  leftIcon={Dot}
  rightIcon={X}
>
  Label
</Label>

fill · outline 조합으로 4가지 스타일을 만들 수 있습니다.

투자

7가지 색상과 스타일 변형의 전체 조합입니다.

Color	Fill	Fill+Outline	Outline	Ghost
Green	Label	Label	Label	Label
Blue	Label	Label	Label	Label
SkyBlue	Label	Label	Label	Label
Purple	Label	Label	Label	Label
Yellow	Label	Label	Label	Label
Red	Label	Label	Label	Label
Grey	Label	Label	Label	Label

leftIcon · rightIcon · iconOnly 조합입니다.

Label

round prop으로 pill 형태와 사각형 형태를 전환합니다.

RoundSquare

Green

RoundSquare

Blue

RoundSquare

SkyBlue

RoundSquare

Purple

RoundSquare

Yellow

RoundSquare

Red

RoundSquare

Grey

Prop	Type	Required	Default	설명
`color`	`"green" \| "blue" \| "skyblue" \| "purple" \| "yellow" \| "red" \| "grey"`	—	"green"	색상 테마
`round`	`boolean`	—	true	pill 형태(true) vs 사각(false)
`fill`	`boolean`	—	true	배경색 채움 여부
`outline`	`boolean`	—	false	테두리 표시 여부
`iconOnly`	`boolean`	—	false	아이콘 전용 뱃지 모드 (20×20)
`leftIcon`	`ComponentType<{ className?: string }>`	—	—	텍스트 앞 아이콘
`rightIcon`	`ComponentType<{ className?: string }>`	—	—	텍스트 뒤 아이콘
`children`	`ReactNode`	—	—	레이블 텍스트
`className`	`string`	—	—	추가 CSS 클래스