Badge - Kumo

PrimarySecondaryDestructiveSuccessOutlineBeta

import { Badge } from "@cloudflare/kumo";

export function BadgeVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="beta">Beta</Badge>
    </div>
  );
}

Installation

Barrel

import { Badge } from "@cloudflare/kumo";

Granular

import { Badge } from "@cloudflare/kumo/components/badge";

Usage

import { Badge } from "@cloudflare/kumo";

export default function Example() {
  return <Badge variant="primary">New</Badge>;
}

Examples

Variants

Primary

import { Badge } from "@cloudflare/kumo";

export function BadgePrimaryDemo() {
  return <Badge variant="primary">Primary</Badge>;
}

Secondary

import { Badge } from "@cloudflare/kumo";

export function BadgeSecondaryDemo() {
  return <Badge variant="secondary">Secondary</Badge>;
}

Destructive

import { Badge } from "@cloudflare/kumo";

export function BadgeDestructiveDemo() {
  return <Badge variant="destructive">Destructive</Badge>;
}

Success

import { Badge } from "@cloudflare/kumo";

export function BadgeSuccessDemo() {
  return <Badge variant="success">Success</Badge>;
}

Outline

import { Badge } from "@cloudflare/kumo";

export function BadgeOutlineDemo() {
  return <Badge variant="outline">Outline</Badge>;
}

Beta

import { Badge } from "@cloudflare/kumo";

export function BadgeBetaDemo() {
  return <Badge variant="beta">Beta</Badge>;
}

In a sentence

WorkersBeta

import { Badge } from "@cloudflare/kumo";

export function BadgeInSentenceDemo() {
  return (
    <p className="flex items-center gap-2">
      Workers
      <Badge variant="beta">Beta</Badge>
    </p>
  );
}

API Reference

Prop	Type	Default	Description
variant	`"primary" \| "secondary" \| "destructive" \| "success" \| "outline" \| "beta"`	`"primary"`	Visual style of the badge. - `"primary"` — High-emphasis badge for important labels - `"secondary"` — Subtle badge for secondary information - `"destructive"` — Error or danger state indicator - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features
className	`string`	-	Additional CSS classes merged via `cn()`.
children	`ReactNode`	-	Content rendered inside the badge.