Badge

@/components/kamod-ui/badge

BadgeSecondaryDestructiveOutline

Installation

Import Badge from `@/components/kamod-ui/badge`.

pnpm add @kamod-ch/ui

import { Badge } from "@/components/kamod-ui/badge";

Pick a variant for emphasis; default renders a filled neutral chip. Use BreadcrumbPage or Button for navigation—Badge is for status and metadata.

import { Badge } from "@/components/kamod-ui/badge";

<Badge />

DefaultOutline

Shadcn-compatible set plus additional semantic colors for product UI.

DefaultSecondaryDestructiveOutlineGhost

Kamod also ships semantic variants for dashboards and status chips: primary, info, success, warning, and error.

PrimaryInfoSuccessWarningError

Set data-icon="inline-start" or data-icon="inline-end" on the icon so padding stays balanced.

VerifiedBookmark

Short-lived states: pair Spinner with the same data-icon attributes.

DeletingGenerating

Use asChild so an anchor (or router Link) receives badge styling. You can still pass href without asChild to render a native anchor.

Override with utility classes for brand-specific chips (including dark mode pairs).

BlueGreenSkyPurpleRed

Kamod-specific density scale from xxs through lg.

Extra extra smallExtra smallSmallMediumLarge

Badge props and accepted values.

Renders as span by default; href renders anchor; asChild merges onto a single child.

Prop	Type	Default
variant	`"default" \| "primary" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link" \| "info" \| "success" \| "warning" \| "error"`	`"default"`
size	`"xxs" \| "xs" \| "sm" \| "md" \| "lg"`	`"md"`
asChild	`boolean`	`false`
href	`string`	`-`
class	`string`	`-`

Use Badge with clear labels, keyboard-friendly interactions and semantic structure.