PrimarySecondaryDestructiveOutlineBeta
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="beta">Beta</Badge>Installation
npm install @cloudflare/kumoUsage
import { Badge } from "@cloudflare/kumo";
export default function Example() {
return <Badge variant="primary">Beta</Badge>;
}Examples
Variants
Primary
<Badge variant="primary">Primary</Badge>Secondary
<Badge variant="secondary">Secondary</Badge>Destructive
<Badge variant="destructive">Destructive</Badge>Outline
<Badge variant="outline">Outline</Badge>Beta
<Badge variant="beta">Beta</Badge>In a sentence
WorkersBeta
<p className="flex items-center gap-2">
Workers
<Badge variant="beta">Beta</Badge>
</p>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "destructive" | "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. |