Badge
상태나 카테고리를 한눈에 보이는 라벨로 표시해요. 순수 표현 컴포넌트라 RSC 에서도 바로 쓸 수 있어요.
사용법
Badge
tsx
import { Badge } from '@openiot/ui'
export function Example() {
return <Badge variant="success">Active</Badge>
}Variant
5가지 변형. 기본값은 default 예요.
DefaultActivePendingErrorDraft
tsx
<Badge>Default</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Draft</Badge>Props
| Prop | Type | Default | 설명 |
|---|---|---|---|
| variant | 'default' | 'success' | 'warning' | 'destructive' | 'outline' | 'default' | 상태/카테고리에 따른 색상 |
| ...props | HTMLAttributes<HTMLSpanElement> | — | 나머지 모든 네이티브 span 속성 |