Badge
Badge is a small label for status, metadata, and categorization.
Use it for tags like New, Pending, Paid, Beta, or role labels in lists and cards.
Installation
1. Install dependencies:
npm install class-variance-authority2. Copy the source code:
- Source in this monorepo:
packages/ui/src/components/badge.tsx - Place in your project:
components/ui/badge.tsx - Required utility:
lib/utils.ts(forcnhelper)
3. Update the import paths to match your project structure.
Usage
import { Badge } from "@hoag/ui/components/badge";
export default function Demo() {
return <Badge>New</Badge>;
}Default
New
Beta
<Badge>New</Badge>
<Badge variant="secondary">Beta</Badge>Base Variants
Default
Secondary
Destructive
Outline
Success
Warning
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>Status Families
Heavy
Success
Warning
Info
Error
<Badge variant="heavy-success">Success</Badge>
<Badge variant="heavy-warning">Warning</Badge>
<Badge variant="heavy-info">Info</Badge>
<Badge variant="heavy-error">Error</Badge>Light
Success
Warning
Info
Error
<Badge variant="light-success">Success</Badge>
<Badge variant="light-warning">Warning</Badge>
<Badge variant="light-info">Info</Badge>
<Badge variant="light-error">Error</Badge>Outline Status
Success
Warning
Info
Error
<Badge variant="outline-success">Success</Badge>
<Badge variant="outline-warning">Warning</Badge>
<Badge variant="outline-info">Info</Badge>
<Badge variant="outline-error">Error</Badge>Sizes
Small
Default
Large
<Badge size="sm">Small</Badge>
<Badge size="default">Default</Badge>
<Badge size="lg">Large</Badge>Rounded
None
SM
MD
LG
XL
Full
<Badge rounded="none">None</Badge>
<Badge rounded="sm">SM</Badge>
<Badge rounded="md">MD</Badge>
<Badge rounded="lg">LG</Badge>
<Badge rounded="xl">XL</Badge>
<Badge rounded="full">Full</Badge>Composition Example
Payments
Pending
Paid
<div className="flex items-center gap-3">
<span className="text-sm">Payments</span>
<Badge variant="outline-warning" rounded="full">
Pending
</Badge>
<Badge variant="heavy-success" rounded="full">
Paid
</Badge>
</div>Tips
- Use
rounded="full"for pill-like status chips. - Prefer
light-*variants in dense UIs for better visual balance. - Keep badge text short (usually 1-2 words).
- Use
outline-*when you need low-emphasis metadata.
API Reference
<Badge> Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "primary-success" | "primary-warning" | "primary-info" | "primary-error" | "soft-success" | "soft-warning" | "soft-info" | "soft-error" | "heavy-success" | "heavy-warning" | "heavy-info" | "heavy-error" | "light-success" | "light-warning" | "light-info" | "light-error" | "outline-success" | "outline-warning" | "outline-info" | "outline-error" | "default" | Visual style variant |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "sm" | Border radius style |
size | "sm" | "default" | "lg" | "default" | Badge size |
className | string | — | Custom class for badge root |
children | ReactNode | — | Badge label content |
Exports
BadgebadgeVariants