Badge
@cloudflare/kumo

Badge

Displays a small label for status, categorization, or metadata.

PrimarySecondaryErrorWarningSuccessInfoBetaOutline
 
export function BadgeSemanticVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="beta">Beta</Badge>
      <Badge variant="outline">Outline</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

Primary Badges

PrimarySecondaryErrorWarningSuccessInfoBetaOutline
 
export function BadgeSemanticVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="beta">Beta</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Other variants

Other variants for specific products/use cases where the semantic badges aren’t enough to convey intended meaning or status.

NeutralTealOrangeRedYellowGreenBlue
 
export function BadgeColorVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="teal">Teal</Badge>
      <Badge variant="orange">Orange</Badge>
      <Badge variant="red">Red</Badge>
      <Badge variant="yellow">Yellow</Badge>
      <Badge variant="green">Green</Badge>
      <Badge variant="blue">Blue</Badge>
    </div>
  );
}

In a sentence

WorkersNew

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

API Reference

PropTypeDefaultDescription
variant"primary" | "secondary" | "error" | "warning" | "success" | "info" | "beta" | "outline" | "red" | "yellow" | "green" | "neutral" | "orange" | "teal" | "teal-subtle" | "blue""secondary"Color variant of the badge. Recommended semantic variants: - `"primary"` — Primary badge - `"secondary"` — Secondary badge - `"error"` — Error badge - `"warning"` — Warning badge - `"success"` — Success badge - `"info"` — Info badge Additional token variants: - `"red"`, `"orange"`, `"yellow"`, `"green"`, `"teal"`, `"blue"`, `"neutral"` - `"teal-subtle"`, `"neutral-subtle"` - `"inverted"` - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features
classNamestring-Additional CSS classes merged via `cn()`.
childrenReactNode-Content rendered inside the badge.