Badge
StableThis component has limited functionality on the server side. In Next.js, add
"use client" at the top to make it work.Small, 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
PrimarySecondarySuccessWarningDestructive
Removable Badges
Badges can be made removable by passing an onRemove callback function.
Removable Badge Tags
ReactTypeScriptTailwindJavaScript
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to display in the badge |
| variant | "primary" | "secondary" | "success" | "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 |