Badge

Badge is a compact inline label used for status indicators, categories, version tags, and counts.

Interactive example#

Badge · Live example

Ready to review

Choose a treatment and see the badge change while keeping its readable label.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { Badge } from '@clidey/ux';

Variants#

TSX

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Variant	Use case
`default`	Primary category, active status
`secondary`	Neutral category, draft status
`destructive`	Error, blocked, or danger status
`outline`	Low-emphasis label, version tag

With icons#

TSX

import { IconCheckCircle as CheckCircle2, IconClock as Clock, IconXCircle as XCircle } from '@clidey/ux';

<Badge>
  <CheckCircle2 className="size-3" />
  Active
</Badge>

<Badge variant="secondary">
  <Clock className="size-3" />
  Pending
</Badge>

<Badge variant="destructive">
  <XCircle className="size-3" />
  Failed
</Badge>

Common use cases#

Status labels

TSX

function StatusBadge({ status }: { status: string }) {
  const variants = {
    active: 'default',
    pending: 'secondary',
    failed: 'destructive',
    draft: 'outline',
  } as const;

  return (
    <Badge variant={variants[status as keyof typeof variants] ?? 'outline'}>
      {status}
    </Badge>
  );
}

Version tag

TSX

<span className="font-medium">
  Authentication API <Badge variant="outline">v2.1</Badge>
</span>

Count indicator

TSX

<div className="flex items-center gap-2">
  <span>Notifications</span>
  <Badge>12</Badge>
</div>

Render as link (asChild)#

TSX

<Badge>
  <a href="/changelog">v1.5.0</a>
</Badge>

Props#

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	`"default"`	Visual style.
`asChild`	`boolean`	`false`	Render as the child element.
`className`	`string`	—	Additional CSS classes.
`children`	`ReactNode`	—	Badge content.

Was this page helpful?