Badge
A versatile badge component for labels, status indicators, and tags with multiple variants, sizes and dark mode support
Installation
Install the Badge component using the nocta-ui CLI:
npx nocta-ui add badgeThen import the component:
import { Badge } from '@/components/ui/badge';Examples
Default Badge
Default
Secondary Badge
Secondary
Variants
The Badge component supports six variants: default, secondary, destructive, success, and warning.
DefaultSecondaryDestructiveSuccessWarning
Sizes
Three size options are available: sm, md, and lg. The default size is md.
SmallMediumLarge
API Reference
Badge Api Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content of the badge |
variant | 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'default'` | The visual style variant | |
size | 'sm' | 'md' | 'lg' | 'md' | The size of the badge |
className | string | '' | Additional CSS classes to apply |
The Badge component also accepts all standard HTML span element props through the ...props spread operator.