Badge
설치 확인상태·라벨
1. 목적과 출처
상태·라벨
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/badge.tsx- Registry
@adcapsule/badge
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| variant | 글자만 | 아이콘과 함께 |
|---|---|---|
| 주요 default | 디자인 | 완료 |
| 보조 secondary | 디자인 | 완료 |
| 외곽선 outline | 디자인 | 완료 |
| 고스트 ghost | 디자인 | 완료 |
| 위험 destructive | 디자인 | 완료 |
| 링크 link | 디자인 | 완료 |
3. 속성 바꿔 보기
진행 중
variant
4. 설치와 사용
- npm 패키지
- @base-ui/react, class-variance-authority
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- variant
- 앞에 아이콘
- render로 링크(<a>)처럼 쓰기
- 이슈 상태 색은 Badge가 아니라 Status Indicator로(준비 중)
공통으로 유지할 토큰
- accent.solid (default)
- surface.raised (secondary)
- border.default (outline)
- status.danger (destructive)
- font.size.caption