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
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
packages.sections.api
Component props and API reference 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. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.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 | — | packages.commonProps.className.description |
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.