Badge

상태/속성 표시용 레이블. solid/outlined × neutral|accent × xs/sm/md.

사용

import { Badge } from "@fluxloop-ai/pds-ui/components/badge";

<Badge>Default (accent + cyan)</Badge>
<Badge color="accent" accentColor="positive">Positive</Badge>
<Badge variant="outlined" color="neutral" neutralColor="strong">Strong</Badge>

Variants × Color × Size

Variants × Color (default accentColor=cyan, neutralColor=alternative)

solid

AccentNeutral

outlined

AccentNeutral

Sizes

xsmallsmallmedium

Neutral color (neutralColor)

assistivealternativeneutralnormalstrong

Accent color (accentColor)

red-orangelimecyanlight-blueviolet

Status (accentColor)

PositiveCautionaryNegative

아이콘 / 카운트

승인됨3

Props

Prop	타입	기본	설명
`variant`	`solid \| outlined`	`solid`	solid = bg `accentColor @ 8%` / outlined = white bg + `accentColor @ 43%` border
`size`	`xs \| sm \| md`	`xs`	radius 8/8/10, font 11/12/13, py 3/4/5 px
`color`	`neutral \| accent`	`accent`	foreground 토큰 종류
`accentColor`	`red \| red-orange \| orange \| lime \| green \| cyan \| light-blue \| blue \| violet \| purple \| pink \| positive \| cautionary \| negative`	`cyan`	`color=accent` 일 때 사용할 foreground 토큰
`neutralColor`	`normal \| strong \| neutral \| alternative \| assistive \| disable`	`alternative`	`color=neutral` 일 때 사용할 label 토큰
`leadingContent` / `trailingContent`	`ReactNode`	-	아이콘 등

Hierarchy

Level	조합
4 — 가장 높은 주목	`variant="solid" color="accent"`
3 — 강조	`variant="outlined" color="accent"`
2 — 일반	`variant="solid" color="neutral"`
1 — 부가	`variant="outlined" color="neutral"`

Registry 설치

npx shadcn add https://pds.pluto.com/r/badge