Badge - Kumo

RedOrangeYellowGreenTealBlueNeutralInvertedOutlineBetaRed subtleOrange subtleYellow subtleGreen subtleTeal subtleBlue subtleNeutral subtle

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

export function BadgeVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="red">Red</Badge>
      <Badge variant="orange">Orange</Badge>
      <Badge variant="yellow">Yellow</Badge>
      <Badge variant="green">Green</Badge>
      <Badge variant="teal">Teal</Badge>
      <Badge variant="blue">Blue</Badge>
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="inverted">Inverted</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="beta">Beta</Badge>
      <Badge variant="red-subtle">Red subtle</Badge>
      <Badge variant="orange-subtle">Orange subtle</Badge>
      <Badge variant="yellow-subtle">Yellow subtle</Badge>
      <Badge variant="green-subtle">Green subtle</Badge>
      <Badge variant="teal-subtle">Teal subtle</Badge>
      <Badge variant="blue-subtle">Blue subtle</Badge>
      <Badge variant="neutral-subtle">Neutral subtle</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="neutral">New</Badge>;
}

Examples

Variants

Red

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

export function BadgeRedDemo() {
  return <Badge variant="red">Red</Badge>;
}

Orange

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

export function BadgeOrangeDemo() {
  return <Badge variant="orange">Orange</Badge>;
}

Yellow

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

export function BadgeYellowDemo() {
  return <Badge variant="yellow">Yellow</Badge>;
}

Green

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

export function BadgeGreenDemo() {
  return <Badge variant="green">Green</Badge>;
}

Teal

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

export function BadgeTealDemo() {
  return <Badge variant="teal">Teal</Badge>;
}

Blue

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

export function BadgeBlueDemo() {
  return <Badge variant="blue">Blue</Badge>;
}

Neutral

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

export function BadgeNeutralDemo() {
  return <Badge variant="neutral">Neutral</Badge>;
}

Inverted

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

export function BadgeInvertedDemo() {
  return <Badge variant="inverted">Inverted</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>;
}

Subtle variants

Red subtle

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

export function BadgeRedSubtleDemo() {
  return <Badge variant="red-subtle">Red subtle</Badge>;
}

Orange subtle

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

export function BadgeOrangeSubtleDemo() {
  return <Badge variant="orange-subtle">Orange subtle</Badge>;
}

Yellow subtle

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

export function BadgeYellowSubtleDemo() {
  return <Badge variant="yellow-subtle">Yellow subtle</Badge>;
}

Green subtle

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

export function BadgeGreenSubtleDemo() {
  return <Badge variant="green-subtle">Green subtle</Badge>;
}

Teal subtle

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

export function BadgeTealSubtleDemo() {
  return <Badge variant="teal-subtle">Teal subtle</Badge>;
}

Blue subtle

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

export function BadgeBlueSubtleDemo() {
  return <Badge variant="blue-subtle">Blue subtle</Badge>;
}

Neutral subtle

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

export function BadgeNeutralSubtleDemo() {
  return <Badge variant="neutral-subtle">Neutral subtle</Badge>;
}

In a sentence

WorkersNew

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

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

API Reference

Prop	Type	Default	Description
variant	`"red" \| "red-subtle" \| "orange" \| "orange-subtle" \| "yellow" \| "yellow-subtle" \| "green" \| "green-subtle" \| "teal" \| "teal-subtle" \| "blue" \| "blue-subtle" \| "neutral" \| "neutral-subtle" \| "inverted" \| "outline" \| "beta" \| "primary" \| "secondary" \| "destructive" \| "success"`	`"neutral"`	Color variant of the badge. - `"red"` / `"red-subtle"` — Red badge - `"orange"` / `"orange-subtle"` — Orange badge - `"yellow"` / `"yellow-subtle"` — Yellow badge - `"green"` / `"green-subtle"` — Green badge (emerald scale) - `"teal"` / `"teal-subtle"` — Teal badge - `"blue"` / `"blue-subtle"` — Blue badge - `"neutral"` / `"neutral-subtle"` — Neutral badge - `"inverted"` — Inverted badge (near-black, white in dark mode) - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features - `"primary"` — Deprecated. Use `"inverted"` instead. - `"secondary"` — Deprecated. Use `"neutral"` instead. - `"destructive"` — Deprecated. Use `"red"` instead. - `"success"` — Deprecated. Use `"green"` instead.
className	`string`	-	Additional CSS classes merged via `cn()`.
children	`ReactNode`	-	Content rendered inside the badge.