Badges
A badge component for displaying status, counts, or contextual information. Supports multiple variants, colors, and sizes. Perfect for notifications, status indicators, and labels.
Installation
Import
Usage
Use Badge for status indicators, notification counts, and labels. Choose variants based on visual hierarchy (solid for emphasis, soft for subtle). Use colors semantically (success for positive, destructive for errors). Size badges appropriately for their context.
Design Guidelines
Maintain consistent badge styling throughout your application. Use appropriate sizes for different contexts. Group related badges visually. Use colors semantically and consistently. Position notification badges clearly relative to their triggers.
Basic Usage
Simple badges with different variants
Badge Variants
All badge variants: solid, outline, and soft
Badge Colors
Badges with different color schemes
Sizes
Badges with different sizes
Order Status Dashboard
Order status tracking with badges
User Role Badges
User roles and permissions display
Notification Badges
Badges for notification counts
Rounded Variants
Badges with and without rounded corners
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "outline" | "soft" | "solid" | Visual variant of the badge |
color | "primary" | "secondary" | "neutral" | "destructive" | "success" | "warning" | "info" | "neutral" | Color scheme of the badge |
badgeSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the badge |
rounded | boolean | true | Whether the badge has rounded corners |
children | React.ReactNode | — | Badge content |
className | string | — | Additional CSS classes to apply to the component |
Accessibility
Accessibility features and considerations
Badges should have meaningful content. Use color in combination with text, not alone. Ensure sufficient color contrast for all variants. Screen readers will announce badge content. Use appropriate sizes for readability.