Button
@cloudflare/kumo

Button

显示一个按钮，或一个外观看起来像按钮的组件。

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>
  );
}

安装

批量导入

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

细粒度导入

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

用法

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

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

示例

变体

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>;
}

尺寸

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>
  );
}

带图标

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

export function ButtonWithIconDemo() {
  return (
    <Button variant="secondary" icon={PlusIcon}>
      Create Worker
    </Button>
  );
}

仅图标

对于仅图标的按钮，配合 icon 属性使用 shape="square" 或 shape="circle"。 务必始终提供 aria-label 以保证无障碍——没有可见文字时，屏幕阅读器需要该标签来 传达按钮的用途。

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>
  );
}

加载状态

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

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

禁用状态

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

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

工具提示 (title)

使用 title 属性为按钮包裹一个工具提示。它适用于 仅图标的按钮、禁用的按钮，或任何补充上下文能帮助 用户理解操作的场景。

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

/** Demonstrates title tooltips on enabled, icon-only, and disabled buttons. */
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"
      />
      <Button
        variant="secondary"
        title="You need edit access to create a Worker"
        disabled
      >
        Create Worker
      </Button>
    </div>
  );
}

链接样式按钮

当交互需要跳转到别处、但外观仍应像按钮时，使用 LinkButton。 对于提交、打开、切换 UI 这类就地操作，则使用 Button。

Read Link docsCloudflare Docs
import { LinkButton } from "@cloudflare/kumo";
import { ArrowSquareOutIcon } from "@phosphor-icons/react";

/** Demonstrates using LinkButton for navigation actions that should look like buttons. */
export function ButtonLinkAsButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <LinkButton href="/components/link" variant="secondary">
        Read Link docs
      </LinkButton>
      <LinkButton
        href="https://developers.cloudflare.com"
        variant="ghost"
        icon={ArrowSquareOutIcon}
        external
      >
        Cloudflare Docs
      </LinkButton>
    </div>
  );
}

带工具提示的链接

给 LinkButton 传入 title 即可像 Button 一样为它包裹 工具提示。这会在悬停和聚焦时呈现额外的上下文。

Read Link docs
import { LinkButton } from "@cloudflare/kumo";

/** Demonstrates a title tooltip on an enabled LinkButton. */
export function ButtonLinkTooltipDemo() {
  return (
    <LinkButton
      href="/components/link"
      variant="secondary"
      title="Opens the Link component docs"
    >
      Read Link docs
    </LinkButton>
  );
}

禁用的链接

在 LinkButton 上设置 disabled,可渲染一个不可交互、 但样式与链接一致的按钮。传入 title 可通过工具提示 解释它为何不可用。

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

/** Demonstrates the disabled LinkButton, including a title tooltip explaining why. */
export function ButtonDisabledLinkDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <LinkButton href="/components/link" variant="secondary" disabled>
        Disabled link
      </LinkButton>
      <LinkButton
        href="/components/link"
        variant="secondary"
        disabled
        title="You need edit access to continue"
      >
        Disabled with tooltip
      </LinkButton>
    </div>
  );
}

API 参考

属性类型默认值说明
shape"base" | "square" | "circle""base"-
size"xs" | "sm" | "base" | "lg""base"-
variant"primary" | "secondary" | "ghost" | "destructive" | "secondary-destructive" | "outline""secondary"-
childrenReactNode--
classNamestring--
iconReactNode-Icon from `@phosphor-icons/react` or a React element. Rendered before children.
loadingboolean-Shows a loading spinner and disables interaction.
titlestring--
idstring--
langstring--
disabledboolean--
namestring--
type"submit" | "reset" | "button"--
valuestring | string[] | number--