Badge
core인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.
컴포넌트 의존 관계
깊이
100%
Variants
DefaultInfoSuccessWarningError
With Dot
DefaultInfoSuccessWarningError
Sizes
SmallMedium
테스트 커버리지
2026년 2월 4일4/4 통과
4성공
0실패
4전체
- children을 렌더링한다
- variant에 따른 스타일을 적용한다
- dot 옵션으로 상태 점을 표시한다
- size에 따른 스타일을 적용한다
Badge Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
variant | "default" | "success" | "warning" | "error" | "info" | "default" | 뱃지 색상 변형 |
size | "sm" | "md" | "md" | 뱃지 크기 |
dot | boolean | false | 상태 점 표시 여부 |
progress | number | — | 원형 프로그레스 값 (0-100). 설정 시 dot 무시 |
progressSize | number | 16 | 프로그레스 링 SVG 크기 (px) |
Import
tsx
import { Badge } from "@reopt-ai/opt-ui";