Badge
Badges highlight status, counts, or categorize items. They support multiple semantic states, sizes, and an optional status dot.
Badge Playground
Badge Playground
Preview
Code
Badge
Controls
Size:
Default
Small
State:
Default
Primary
Secondary
Success
Important
Disabled
Dot:
Installation
You can add the badge component to your project manually:
1
Copy and paste the following code into your project.
Badge.tsx
Loading source code...
2
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
import { Badge } from '@versaui/ui/components/Badge';
// Default badge with dot
<Badge>Default</Badge>
// Primary badge
<Badge state="primary">Primary</Badge>
// Secondary badge
<Badge state="secondary">Secondary</Badge>
// Important (error) badge
<Badge state="important">Important</Badge>
// Success badge
<Badge state="success">Success</Badge>
// Disabled badge
<Badge state="disabled">Disabled</Badge>Variants
Size
Two sizes are available — default and small:
<Badge size="default">Default Size</Badge>
<Badge size="small">Small Size</Badge>Without Dot
Set dot={false} to hide the status indicator:
<Badge dot={false}>No Dot</Badge>
<Badge state="important" dot={false}>5</Badge>Dot Only
Omit children to display only the status dot:
<Badge state="success" />
<Badge state="important" />Accessibility
- Uses
role="status"for screen reader announcements - Dot-only badges have automatic
aria-labelbased on state - Color contrast meets WCAG 2.1 AA standards
Badge Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'default' | 'small' | 'default' | Badge size variant. |
state | 'default' | 'important' | 'primary' | 'secondary' | 'success' | 'disabled' | 'default' | Semantic state controlling colors. |
dot | boolean | true | Show the status dot indicator. |
children | ReactNode | — | Badge label text. Omit for dot-only mode. |
className | string | '' | Additional CSS classes. |