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';Basic Usage
Default Badge
Default
Secondary Badge
Secondary
Variants
The Badge component supports six variants: default, secondary, destructive, success, warning, and outline.
DefaultSecondaryDestructiveSuccessWarningOutline
Sizes
Three size options are available: sm, md, and lg. The default size is md.
SmallMediumLarge
Customization
Custom Styling
The Badge component accepts a className prop for custom styling:
GradientCustom ColorSquare
API Reference
Badge Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content of the badge |
variant | 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'outline' | '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.