Badge

A small status indicator with variant colors, dot/icon prefix, and optional dismiss button.

import { Badge } from "metricui";

Use Badge for labels, tags, and status indicators. It works well inside table cells, card headers, and alongside text to convey state at a glance. For threshold-based status with pulse animation, use StatusIndicator instead.

Basic Example

Badge ships with six semantic variants: default, success, warning, danger, info, and outline.

DefaultSuccessWarningDangerInfoOutline

<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="outline">Outline</Badge>

Sizes

Three sizes are available: sm, md (default), and lg.

SmallMediumLarge

<Badge size="sm" variant="info">Small</Badge>
<Badge size="md" variant="info">Medium</Badge>
<Badge size="lg" variant="info">Large</Badge>

With Icon

Pass any React node as the icon prop to render it before the text. Icons from Lucide or any icon library work well.

VerifiedReviewFast

<Badge variant="success" icon={<CheckCircle className="h-3 w-3" />}>
  Verified
</Badge>
<Badge variant="warning" icon={<AlertTriangle className="h-3 w-3" />}>
  Review
</Badge>
<Badge variant="info" icon={<Zap className="h-3 w-3" />}>
  Fast
</Badge>

Dot Indicator

The dot prop adds a small colored circle before the text — useful for status indicators in tables or lists.

ActivePendingOffline

<Badge variant="success" dot>Active</Badge>
<Badge variant="warning" dot>Pending</Badge>
<Badge variant="danger" dot>Offline</Badge>

Dismissible

Pass an onDismiss callback to show a dismiss button. Useful for removable tags or filters.

Click X to dismissFilter: ActiveTag: v2.0

<Badge
  variant="info"
  onDismiss={() => handleDismiss()}
>
  Removable Tag
</Badge>

Custom Color

The color prop accepts any CSS color string. It sets the text color and generates a tinted background using color-mix. When set, variant styles are bypassed.

IndigoPinkAmberCyan

<Badge color="#6366F1">Indigo</Badge>
<Badge color="#EC4899">Pink</Badge>
<Badge color="#F59E0B">Amber</Badge>
<Badge color="#06B6D4" dot>Cyan</Badge>

Props

Prop	Type	Default	Description
`children`*	`React.ReactNode`	—	Badge content (text or elements).
`variant`	`"default" \| "success" \| "warning" \| "danger" \| "info" \| "outline"`	`"default"`	Semantic color variant.
`dot`	`boolean`	`false`	Show a colored dot indicator before the text.
`icon`	`React.ReactNode`	—	Custom icon before the text. Takes precedence over dot.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Badge size.
`color`	`string`	—	Custom color — sets text color and tinted background via CSS color-mix.
`onDismiss`	`() => void`	—	Show a dismiss (X) button and call this on click.
`className`	`string`	—	Additional CSS class names.
`id`	`string`	—	HTML id attribute.
`data-testid`	`string`	—	Test id.

Notes

Uses forwardRef to HTMLSpanElement.
When `color` is provided, variant styles are bypassed in favor of inline CSS using color-mix.
The `icon` prop takes precedence over `dot` — if both are set, only icon is shown.
Size 'sm': 10px text, 'md': 12px text (xs), 'lg': 14px text (sm).