Badge
Small status indicator for labeling content.
1npx purekit add badge
1import Badge from "@/components/purekit-ui/badge/badge"
Variants
Different visual variants
DefaultSuccessWarningErrorInfo
Sizes
Badge sizes
SMMDLG
Label Prop
Using label prop instead of children
New
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'error' | 'info' | 'default' | Visual style of the badge |
size | 'sm' | 'md' | 'lg' | 'sm' | Badge size |
label | any | - | Label text when children are not provided |
children | React.ReactNode | - | Badge content |
Class Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | '' | Additional CSS classes |