Badge
Compact pill-shaped labels for status, counts, and metadata. Use Badge for small semantic indicators that should stay visually lightweight.
When to use
Do
- ✓Use badges for status, counts, and lightweight metadata.
- ✓Use semantic variants to reinforce meaning such as success, warning, or danger.
- ✓Use size="sm" in dense layouts such as tables, filters, and sidebars.
- ✓Provide the label prop when a numeric badge needs additional screen reader context.
Don't
- ✕Do not use badges as buttons or navigation links.
- ✕Do not rely on color alone without a meaningful visible label.
- ✕Do not overload a single view with too many badges competing for attention.
- ✕Do not use long sentence-length content inside badges.
Choosing the right size
sm — Best for dense UIs such as table cells and inline metadata.
md — Default size for cards, headers, and status summaries.