Badge
A versatile badge component for displaying status, categories, or labels with multiple variants and styling options.
Overview
The Badge component provides a consistent way to display status indicators, categories, or labels throughout your application. It's designed to provide quick visual context with multiple styling options and accessibility features.
Usage
Examples
Default Variants
All available variants for different use cases.
Size Variants
Different sizes available for the badge component.
Monospace Font
Badges with monospace font for technical content like IDs or codes.
Status Badges
Common status indicators used in applications.
Interactive Badges
Interactive styling with hover effects.
Features
- Multiple Variants: Six different visual styles (primary, secondary, success, warning, blocked, error)
- Size Options: Default and small sizes for different contexts
- Font Options: Support for monospace font for technical content
- Accessibility: Built-in accessibility support with proper contrast ratios
- Customizable: Extensive styling options through className prop
- Responsive: Adapts to different screen sizes
Props
Prop | Type | Default | Description |
---|---|---|---|
variant | "primary" | "secondary" | "success" | "warning" | "blocked" | "error" | "primary" | The visual variant of the badge. |
size | "DEFAULT" | "sm" | "DEFAULT" | The size of the badge. |
font | "mono" | - | Use monospace font for the badge text. |
className | string | - | Additional CSS classes to apply to the badge. |
Variants
- primary: Default neutral appearance with gray background
- secondary: Subtle border style with lighter background
- success: Green styling for positive states
- warning: Yellow/orange styling for warnings
- blocked: Orange styling for blocked or restricted states
- error: Red styling for errors or negative states
Structure
The Badge component is a simple, self-contained component that doesn't require sub-components. It renders as a single span element with appropriate styling and accessibility attributes.
Styling
The Badge component includes default styling with:
- Consistent padding and border radius
- Color-coded variants for semantic meaning
- Dark mode support
- Hover states for interactive badges
- Focus states for accessibility
- Responsive design
Custom Styling
You can customize the appearance using the className prop:
Accessibility
The Badge component follows accessibility best practices:
- Semantic HTML: Uses semantic HTML with proper color contrast ratios
- Text Readability: Text is readable and meets WCAG guidelines
- Screen Reader Support: Can be used with screen readers without issues
- Visual Feedback: Hover states provide visual feedback for interactive elements
- Focus Management: Proper focus states for keyboard navigation