Component
Badge
Compact label for status, count, or category. Used inline alongside other content.
Usage
Badges communicate status or categorization at a glance. Keep labels short.
Playground
Preview
Badge
Configure
Badge text
Code
<Badge>Badge</Badge>Do
- Keep text under 3 words
- Use secondary for neutral/informational states
- Use destructive sparingly for errors or warnings
Don't
- Don't use as a button replacement
- Don't stack more than 3 badges in a row