Badge
의미 있는 색상과 크기 옵션을 제공하는 간결한 상태 레이블이에요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
uiSize | md, lg | md |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/badge.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRBadge } from '@tinyrack/ui/components/badge';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
아이콘과 너비가 제한된 긴 레이블 고유 링크
옆의 텍스트가 같은 상태를 전달하면 아이콘은 장식용이에요. 긴 레이블은 상위 요소 안에서 줄바꿈돼요.
상태 variant 고유 링크
색상만 보지 말고 상태의 의미에 따라 variant를 선택하세요.
크기 고유 링크
주변 텍스트와 컨트롤의 밀도에 맞추세요.
API
옵션
| Prop | 타입 | 기본값 | 용도 |
|---|---|---|---|
variant | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 상태 의미와 색상 표현을 선택해요. |
uiSize | 'md' | 'lg' | 'md' | Badge 밀도를 정해요. |
HTML과 접근성
TRBadge는 span을 렌더링하고 네이티브 속성, 이벤트, 스타일, React 19 ref를 전달해요. TRBadgeProps, TRBadgeUiSize, TRBadgeVariant 타입도 내보내요. role이나 live-region 동작은 자동으로 지정하지 않아요. 상태 텍스트를 표시하고, 아이콘만 사용할 때는 애플리케이션에서 접근 가능한 레이블을 제공하세요.