Button - Kumo

import { Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

export function ButtonBasicDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="secondary">Button</Button>
      <Button
        variant="secondary"
        shape="square"
        icon={PlusIcon}
        aria-label="Add"
      />
    </div>
  );
}

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

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

export function ButtonPrimaryDemo() {
  return <Button variant="primary">Primary</Button>;
}

Secondary

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

export function ButtonSecondaryDemo() {
  return <Button variant="secondary">Secondary</Button>;
}

Ghost

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

export function ButtonGhostDemo() {
  return <Button variant="ghost">Ghost</Button>;
}

Destructive

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

export function ButtonDestructiveDemo() {
  return <Button variant="destructive">Destructive</Button>;
}

Outline

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

export function ButtonOutlineDemo() {
  return <Button variant="outline">Outline</Button>;
}

Secondary Destructive

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

export function ButtonSecondaryDestructiveDemo() {
  return <Button variant="secondary-destructive">Secondary Destructive</Button>;
}

Sizes

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

export function ButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <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>
    </div>
  );
}

With Icon

import { Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

export function ButtonWithIconDemo() {
  return (
    <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.

import { Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

export function ButtonIconOnlyDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button
        variant="secondary"
        shape="square"
        icon={PlusIcon}
        aria-label="Add item"
      />
      <Button
        variant="secondary"
        shape="circle"
        icon={PlusIcon}
        aria-label="Add item"
      />
    </div>
  );
}

Loading State

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

export function ButtonLoadingDemo() {
  return (
    <Button variant="primary" loading>
      Loading...
    </Button>
  );
}

Disabled State

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

export function ButtonDisabledDemo() {
  return (
    <Button variant="secondary" disabled>
      Disabled
    </Button>
  );
}

Title

Use the title prop to wrap the button in a tooltip. This is useful for icon-only buttons or whenever additional context helps the user understand the action.

import { Button } from "@cloudflare/kumo";
import { PlusIcon } from "@phosphor-icons/react";

/** Demonstrates the title prop which wraps the button in a Tooltip. */
export function ButtonTitleDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="secondary" title="Create a new Worker">
        Create Worker
      </Button>
      <Button
        variant="secondary"
        shape="square"
        icon={PlusIcon}
        aria-label="Add item"
        title="Add item"
      />
    </div>
  );
}

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.
title	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
disabled	`boolean`	-	-
name	`string`	-	-
type	`"submit" \| "reset" \| "button"`	-	-
value	`string \| string[] \| number`	-	-