Badge

A small status indicator for labels, counts, and tags. Supports multiple semantic variants and sizes.

$npx shadcn add @patchui/badge

Variants

DefaultPrimarySecondarySuccessWarningDanger

Sizes

Extra SmallSmallLarge

Shape

RoundedPillActivePendingError

Dismissible (onRemove)

DesignRemoteFull-time

Usage

import { Badge } from "@patchui/react";
 
// Basic
<Badge>Default</Badge>
 
// Semantic variants
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Error</Badge>
 
// Sizes
<Badge size="xs">Tiny</Badge>
<Badge size="sm">Small</Badge>
<Badge size="lg">Large</Badge>
 
// Shape
<Badge shape="rounded">Rounded</Badge>
<Badge shape="pill">Pill</Badge>
<Badge variant="success" shape="pill">Active</Badge>
 
// As a link (polymorphic render prop)
<Badge render={<a href="/status" />}>Linked</Badge>
 
// Dismissible - renders a trailing × (applied filters, tokens, facets)
<Badge variant="secondary" onRemove={() => removeFilter("Design")}>
  Design
</Badge>

Props

Prop	Type	Default	Description
variant	"default" \| "primary" \| "secondary" \| "ghost" \| "success" \| "warning" \| "danger"	"default"	The visual style of the badge.
size	"xs" \| "sm" \| "md" \| "lg"	"sm"	The size of the badge.
shape	"rounded" \| "pill"	"rounded"	The border-radius style. Use pill for a fully rounded badge.
onRemove	() => void	-	When provided, renders a trailing × button that calls this handler. Turns the badge into a removable tag (applied filters, tokens, facets).
removeLabel	string	"Remove"	Accessible label for the × remove button.
render	RenderProp<'span'>	-	Polymorphic render prop - pass a different element (e.g. <a>) to change the rendered tag while keeping badge styles.
className	string	-	Additional CSS classes to apply.

Notes

Polymorphic rendering: Use the render prop to render the badge as any HTML element. For example, render={<a href="/status" />} renders an anchor tag with badge styling.
Semantic variants: Use success, warning, and danger for status indicators. Use primary for high-emphasis solid badges.
Sizing: The xs size uses a smaller font and tighter padding, suitable for inline use within text.