Button - Kumo

<Button variant="secondary">Button</Button>
<Button variant="secondary" shape="square" icon={PlusIcon} />

Installation

Barrel

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

Granular

import { Button } from "@cloudflare/kumo/components/button";

Usage

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

export default function Example() {
  return <Button variant="secondary">Click me</Button>;
}

Examples

Variants

Primary

<Button variant="primary">Primary</Button>

Secondary

<Button variant="secondary">Secondary</Button>

Ghost

<Button variant="ghost">Ghost</Button>

Destructive

<Button variant="destructive">Destructive</Button>

Outline

<Button variant="outline">Outline</Button>

Secondary Destructive

<Button variant="secondary-destructive">Secondary Destructive</Button>

Sizes

<Button size="xs" variant="secondary">Extra Small</Button>
<Button size="sm" variant="secondary">Small</Button>
<Button size="base" variant="secondary">Base</Button>
<Button size="lg" variant="secondary">Large</Button>

With Icon

<Button variant="secondary" icon={PlusIcon}>
  Create Worker
</Button>

For icon-only buttons, use shape="square" or shape="circle" with the icon prop. Always include aria-label for accessibility — without visible text, screen readers need the label to convey the button's purpose.

<Button variant="secondary" shape="square" icon={PlusIcon} aria-label="Add item" />
<Button variant="secondary" shape="circle" icon={PlusIcon} aria-label="Add item" />

Loading State

<Button variant="primary" loading>
  Loading...
</Button>

Disabled State

<Button variant="secondary" disabled>
  Disabled
</Button>

API Reference

Prop	Type	Default	Description
shape	`"base" \| "square" \| "circle"`	`"base"`	-
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	-
variant	`"primary" \| "secondary" \| "ghost" \| "destructive" \| "secondary-destructive" \| "outline"`	`"secondary"`	-
children	`ReactNode`	-	-
className	`string`	-	-
icon	`ReactNode`	-	Icon from `@phosphor-icons/react` or a React element. Rendered before children.
loading	`boolean`	-	Shows a loading spinner and disables interaction.
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
disabled	`boolean`	-	-
name	`string`	-	-
type	`"submit" \| "reset" \| "button"`	-	-
value	`string \| string[] \| number`	-	-