Components
Badge
Small status indicator with color variants for labels, counts, and tags.
Badge
A compact status indicator component for displaying labels, counts, and categorical information.
Import
import { Badge } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
Default
Secondary
Outline
Destructive
.tsx
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>Variants
Variants
Default
Secondary
Outline
Destructive
Slot Overrides
Slot Overrides
Custom
.tsx
<Badge slots={{ root: 'border-cyan-400/50 shadow-cyan-500/20' }}>
Custom
</Badge>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'outline' | 'destructive' | 'default' | Visual style variant |
slots | SlotOverrides<BadgeSlot> | — | Style overrides per slot |
className | string | — | Additional CSS classes |
children | ReactNode | — | Badge content |