Badge
StableSmall, compact labels used to display status, categories, or other data.
Import
TypeScript React
import { Badge } from "laxod";Variants
Badges come in different variants.
Badge Variants
PrimarySecondaryWarningDestructive
Removable Badges
Badges can be made removable by passing an onRemove callback function.
Removable Badge Tags
ReactTypeScriptJavaScript
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to display in the badge |
| variant | "primary" | "secondary" | "destructive" | "warning" | "outline" | "flat" | "primary" | Visual style of the badge |
| size | "sm" | "md" | "lg" | "md" | Size of the badge |
| className | string | "" | Additional CSS classes to apply |
| onRemove | () => void | - | Callback function when badge is removed |
| icon | ReactNode | - | Icon to display in the badge |