Badge

상태나 카테고리를 표시하는 뱃지 컴포넌트입니다.

Installation

bash

npx axis-cli add badge

Usage

Badge

tsx

import { Badge } from '@axis-ds/ui-react'

export function Example() {
  return <Badge>Badge</Badge>
}

Variants

Default

Secondary

Destructive

Outline

tsx

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	"default"	뱃지 스타일 변형
`className`	`string`	-	추가 CSS 클래스

variant

Type:"default" | "secondary" | "destructive" | "outline"

Default:"default"

뱃지 스타일 변형

className

Type:string

Default:-

추가 CSS 클래스

Accessibility

상태/분류를 나타내는 장식적 라벨입니다.

뱃지가 상태를 전달하면 텍스트로도 동일 정보를 제공해 색상 의존을 피하세요.
인터랙티브하지 않으므로 클릭 동작이 필요하면 Button을 사용하세요.