상태 · SINCE v0.3.0
Badge — 짧은 상태를 텍스트와 색으로 구분하는 Badge
neutral, info, success, warning, error 상태와 sm·md 크기를 제공하는 Expo·React Native Badge 컴포넌트입니다.
Badge 사용 시점과 역할
Badge는 짧은 분류나 상태를 pill 배경, 명확한 label과 선택적 leading 아이콘으로 표현합니다. 각 상태는 soft 배경과 대비되는 전경 토큰 쌍을 사용해 라이트·다크 테마에서 같은 의미를 유지합니다.
- neutral, info, success, warning, error 상태 변형
- caption 기반 sm과 label 기반 md 크기
- 정적 아이콘 또는 color·size 렌더 함수 지원
설치와 최소 예제
Badge: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Badge } from '@gj-kit/expo-ui';
<Badge label="동기화 완료" variant="success" size="sm" />접근성과 플랫폼 동작
상태를 색만으로 전달하지 않고 필수 label 텍스트를 항상 렌더링합니다. 동적으로 바뀐 결과를 즉시 공지해야 할 때는 Badge 자체보다 Alert나 Toast의 live region을 사용합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.