Badge
Badge
Small label component for displaying status, counts, or categories.
Import
import { Badge } from '@primitivekit/vanilla';Basic Usage
const badge = new Badge({ /* options */ });
document.body.appendChild(badge.element);Props
No props available.
Customization
The Badge component supports CSS variables for complete customization:
const badge = new Badge({
style: {
'--badge-bg-color': '#007bff',
'--badge-text-color': '#ffffff'
}
});Design Tokens
The following design tokens are available for customization:
--badge-padding-x--badge-padding-y--badge-font-size--badge-font-weight--badge-border-radius--badge-border-width--small--large--solid--primary- … and 10 more
Accessibility
The Badge component is fully accessible and follows WCAG 2.1 AA standards:
- ✅ Semantic HTML elements
- ✅ Keyboard accessible
- ✅ Focus visible indicator
- ✅ Proper ARIA attributes
- ✅ Screen reader compatible
- ✅ Touch target size (44x44px minimum)
- ✅ Color contrast compliance
Keyboard Navigation
| Key | Action |
|---|---|
Tab | Move focus to/from component |
Related Components
- Alert - Feedback component for displaying important messages, warnings, or notifications.
- Spinner - Loading indicator component for showing that content is being loaded or processed.
- Progress - Feedback component for showing the completion progress of a task or operation.
- Skeleton - Placeholder component for showing loading states with animated skeleton screens.
