Action

Label

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

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

인터랙티브 데모

Label

Color

round

fill

outline

iconOnly

leftIcon

rightIcon

7가지 색상과 5가지 스타일 변형(Fill / Fill+Outline / Outline / Ghost / IconOnly)의 조합입니다.

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

round prop에 따른 모양 비교입니다.

RoundSquare

Green

RoundSquare

Blue

RoundSquare

SkyBlue

RoundSquare

Purple

RoundSquare

Yellow

RoundSquare

Red

RoundSquare

Grey

아이콘 배치 방식별 비교입니다.

LabelText Only

LabelLeft Icon

LabelRight Icon

LabelBoth Icons

Icon Only

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 클래스