Badge

Compact labels for status, category, and metadata. Six semantic variants, three sizes, and an optional dot indicator for real-time status.

Preview

DefaultPrimarySuccessWarningDangerGhost

Status dot

The dot prop prepends a filled circle in the variant color. Use it for live system or user status labels.

OnlineDegradedIncidentOffline

Sizes

Three sizes for different information densities. sm fits inside table cells; lg stands alone as a category tag.

SmallMediumLarge

In context

Badges are most useful inline with text or labels — pipeline status, PR state, plan tiers.

Build pipelinePassing

Pull requestReview

API statusDegraded

PlanPro

Implementation

Badge is a pure presentational component with no client-side state — it can render on the server.

Badge.tsx

tsx

import { Badge } from "@/components/ui/Badge";

// Variants
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="ghost">Ghost</Badge>

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

// With dot (status indicator)
<Badge variant="success" dot>Online</Badge>
<Badge variant="warning" dot>Degraded</Badge>
<Badge variant="danger"  dot>Incident</Badge>
<Badge variant="default" dot>Offline</Badge>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "primary" \| "success" \| "warning" \| "danger" \| "ghost"`	`"default"`	Controls color theme of the badge.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Sets font size and padding.
`dot`	`boolean`	`false`	Prepends a filled circle in the variant color — useful for status labels.
`children`	`ReactNode`	—	Badge label content.

Mobile

Badges are non-interactive and render identically on all screen sizes. A few layout and legibility considerations apply on small screens.

9:41

Notifications

2 new

Messagesnow

Jamie: Sounds good, see you at 3pm

GitHub2m

PR #42 approved by Lena Müller

Calendar14m

Design review starts in 15 minutes

Figma1h

Sam left a comment on Header.fig

Scenario	Guidance
Legibility	Badge text at 10–11px can be hard to read on lower-DPI Android devices. Prefer single-word labels over abbreviations.
Overflow on mobile	Badges in tight horizontal layouts (e.g. nav pills) may truncate or wrap. Set max-w with truncate, or drop the label and show only the dot on narrow screens.
Dot badges	On mobile, dot-only badges (e.g. notification indicators) should be at least 8×8px and have enough contrast against the surface they sit on.
Tap area	Badges are not interactive. If you need a tappable tag, use a Button with ghost variant and small size instead.

Accessibility

→Badges are rendered as <span> — non-interactive and not focusable by default.
→The dot is aria-hidden; its meaning is conveyed by the label text alone.
→All variant colors meet WCAG AA contrast on both light and dark surfaces.
→For dynamic status (e.g. live system health), use aria-live on the parent container to announce changes to screen readers.