Badge
Overview
When to use
- Display status labels for elements like buttons, cards, or navigation items.
- Show notifications or alerts on specific elements.
- Indicate counts or quantities associated with an element.
When to consider an alternative
t.b.d.
Component
Default
Variant=status
Use the variant prop to change the visual style of the badge to represent different statuses. Available variants include:
- success
- error
- warning
- info
- muted
Tiny
Set the tiny prop to true to reduce the size of the badge. This is useful for displaying short numbers or abbreviations.