Badge
Compact, display-only metadata for status, plan, environment, or category.
Use Badge beside the content it describes. Use an interactive control when the value can be changed or removed.
DefaultActivePendingFailed
Status colors
Installation
$npx shadcn@latest add @patchui/badge
The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/badge.tsx.
Usage
<Badge color="success">Active</Badge>Keep labels short and meaningful without relying on color alone.
Examples
Treatment, size, and shape
Choose emphasis independently from density and shape. Icons should reinforce a text label.
SolidSoftOutlinedSmallLargeVerified
Treatment, size, and shape
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "default" | "success" | "warning" | "error" | "default" | Selects the neutral or semantic color role. |
| variant | "solid" | "soft" | "outlined" | "soft" | Selects saturated, tinted, or boundary-only emphasis. |
| size | "sm" | "md" | "lg" | "md" | Sets the metadata density. |
| shape | "rounded" | "pill" | "rounded" | Uses radius-6 or an explicit pill shape. |
| render | RenderProp<"span"> | - | Changes the display-only semantic element. |
Accessibility
- Badge is display-only and must not look interactive.
- Text must communicate the state without color.
- Avoid icon-only badges. If terse content needs clarification, provide an accessible name or nearby explanation.