Badge
상태를 짧은 낱말로 표시해요. 누를 수 없는 표시라 버튼처럼 쓰지 않아요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
활성neutral · subtle
활성neutral · solid
활성success · subtle
활성success · solid
활성warning · subtle
활성warning · solid
활성danger · subtle
활성danger · solid
사용법
- 목록과 표에서는 subtlesolid는 꼭 눈에 띄어야 하는 한 곳에만 써요.
- 크기높이 20, 좌우 space/2, label, radius/sm.
Props
| prop | 값 | 기본값 |
|---|---|---|
| tone | neutral · success · warning · danger | neutral |
| variant | subtle · solid | subtle |
코드
tsx
<Badge tone="success">활성</Badge>
<Badge tone="danger" variant="solid">만료됨</Badge>