Data Display
Badge
A small static mark for a count or short label. Use it to add a number like "3" or a quiet status. For a tag you can click, use Chip instead.
ReactVueWeb Components
View in Storybook Playground
Examples
<Badge status="danger" pill>9</Badge>
<Badge status="success" subtle>Active</Badge>Props
| Name | Type | Default | Description |
|---|---|---|---|
status | BadgeStatus | primary | Semantic color. @default 'primary' |
subtle | boolean | false | Soft/subtle appearance. @default false |
pill | boolean | false | Fully rounded pill shape. @default false |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.