← All matrices
Badge
6 semantic variants × 3 tones (solid / soft / outline) × 2 sizes + optional leading dot.
Source react/src/atoms/Badge.tsx
Bundle 1.18 KB min / 0.56 KB gz
LOC 75
Variant × Tone (size = md)
| Variant |
Solid |
Soft |
Outline |
With dot |
| default |
Draft |
Draft |
Draft |
Draft |
| primary |
New |
New |
New |
New |
| success |
Active |
Active |
Active |
Active |
| warning |
Pending |
Pending |
Pending |
Pending |
| danger |
Failed |
Failed |
Failed |
Failed |
| info |
Info |
Info |
Info |
Info |
Size axis (tone = soft)
| Size | primary | success | danger |
|---|
| sm |
New |
Active |
Failed |
| md |
New |
Active |
Failed |
Props: variant (default|primary|success|warning|danger|info), tone (solid|soft|outline), size (sm|md), dot.