Badge

A small label component for status, tags, and categories.

PREVIEW

SolidOnlineOfflinePendingFeaturedNotification

INSTALLATION

bash

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

USAGE

tsx

import { Badge } from "@kennbalino/kui";

// Variants
<Badge variant="default">Default</Badge>
<Badge variant="solid">Solid</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="muted">Muted</Badge>

// Sizes
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

PROPS

Prop	Type	Default	Description
variant	default \| solid \| success \| warning \| danger \| muted	default	Controls the visual style of the badge.
size	sm \| md \| lg	md	Controls the size of the badge.
className	string	—	Additional CSS classes to apply.
children*	ReactNode	—	Content rendered inside the badge.