Badge
v0.4.0A small status label with semantic color variants.
A small status label with semantic color variants.
Variants
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default | primary | success | warning | error | info | default | Color variant |
size | sm | md | md | Badge size |
children | ReactNode | — | Badge label |
className | string | — | Additional class names |
Compositions
Open all 7 →Properties
Badge props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to render inside the badge |
className | string | — | Additional class names to merge with the component root element |
size | "sm" | "md" | md | Controls the size; defaults to md |
variant | "default" | "primary" | "success" | "warning" | "error" | "info" | default | Controls the color scheme; defaults to default |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).