Components
Badge
A small label for status, categories, or counts. Available in six semantic variants and two sizes.
Variants
DefaultSecondaryOutlineSuccessWarningDestructive
Sizes
SmallMedium
Use cases
Status:Active
Plan:Pro
Notifications:3
Category:Design
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'destructive' | 'default' | Visual style of the badge. |
size | 'sm' | 'md' | 'md' | Controls padding and font size. |
className | string | — | Additional Tailwind classes to merge. |
...rest | HTMLAttributes<HTMLSpanElement> | — | All native span props are forwarded. |
Accessibility
- Badge is a
span— purely decorative unless given a role. - For notification counts, consider
aria-labelor visually hidden text. - Color alone should not convey meaning — pair with text or icons.