Badge
Displays small colored label tags for status flags, counts, or categories, helping users quickly scan and spot key information.
2.7 KB
•Updated on September 20, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-badgeUsage
Code
import { Badge } from '@/components/ui/badge'Code
<Badge>Badge</Badge>Features
Variants
All available badge variants in one overview: default, secondary, outline, destructive, info, success, warning, error.
Sizes
Standard sizing options: sm, default, lg.
Square / Numeric
Badges with equal aspect ratio for counts, indicators, or single characters.
With Icon
Link as Badge
API Reference
This is a custom component using Base UI's useRender hook, not a direct Base UI wrapper.
Badge
A badge component with variant and size options.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|destructive|error|info|outline|secondary|success|warning | default | Controls the badge styling and color scheme |
size | default|sm|lg | default | Controls the badge size |
square | boolean | false | Sets aspect-ratio square for numbers or icon badges |
render | React.ReactElement | - | Render as a different element (e.g., Link) |
Examples
Badge with count
Full rounded badge (pill)
Badge with number after text
Status badges with indicator dots