Action

ContentBadge

콘텐츠 레이블·태그를 표현하는 인라인 뱃지 컴포넌트입니다. Solid/Outlined 스타일, XSmall/Small/Medium 크기, Neutral/Accent 색상 총 12가지 조합을 지원합니다.

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

인터랙티브 데모

텍스트

Variant

Size

Color

Icons

Left IconRight Icon

tsx

<ContentBadge>
  텍스트
</ContentBadge>

Variant × Color 조합별 비교입니다.

xsmallsmallmedium

	neutral	accent
solid	xsmallsmallmedium	xsmallsmallmedium
outlined	xsmallsmallmedium	xsmallsmallmedium

XSmall (20px) · Small (24px) · Medium (28px) 크기별 비교입니다.

xsmall

SolidOutlinedAccentAccent

small

SolidOutlinedAccentAccent

medium

SolidOutlinedAccentAccent

아이콘 배치 옵션별 예시입니다.

뱃지뱃지

검색검색

양쪽 아이콘양쪽 아이콘

accentBackgroundColor와 accentContentColor로 accent 색상을 자유롭게 커스텀할 수 있습니다.

Primary

SolidOutlined아이콘

Purple

SolidOutlined아이콘

Green

SolidOutlined아이콘

Yellow

SolidOutlined아이콘

Red

SolidOutlined아이콘

Prop	Type	Required	Default	설명
`variant`	`"solid" \| "outlined"`	—	"solid"	스타일 변형
`size`	`"xsmall" \| "small" \| "medium"`	—	"small"	크기 (XSmall 20px / Small 24px / Medium 28px)
`color`	`"neutral" \| "accent"`	—	"neutral"	색상 테마
`accentBackgroundColor`	`string`	—	—	accent 배경색 커스텀 (color="accent"일 때 적용)
`accentContentColor`	`string`	—	—	accent 텍스트·아이콘 색상 커스텀 (color="accent"일 때 적용, outlined의 border에도 적용)
`leftIcon`	`ComponentType<{ className?: string }>`	—	—	텍스트 앞에 표시할 아이콘 컴포넌트
`rightIcon`	`ComponentType<{ className?: string }>`	—	—	텍스트 뒤에 표시할 아이콘 컴포넌트
`children`	`ReactNode`	—	—	뱃지 텍스트
`className`	`string`	—	—	추가 CSS 클래스