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