Badge
JSX
<Badge>Badge</Badge>
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Badge } from '@advui/core'
<Badge variant="success">Active</Badge>Examples
Variants
Preview
Code
Default
Secondary
Outline
Paid
Pending
New
Overdue
With icon
Preview
Code
Verified
Featured
API reference
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info' | 'default' | Color intent. |
size | 'sm' | 'md' | 'md' | Padding scale. |
icon | ReactNode | — | Leading icon (12px, tinted to match). |
Accessibility
- Badges are static text — do not rely on color alone; the label must carry the meaning.
- Soft status variants meet 4.5:1 text contrast in light and dark mode.
- For live counts (e.g. unread messages) announce changes with a polite live region elsewhere.