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

示例

变体

主要

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

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

次要

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

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

幽灵

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

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

危险

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

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

描边

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

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

次要危险

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

仅图标

对于仅含图标的按钮，请使用 shape="square" 或 shape="circle" 并配合 icon 属性。 务必始终包含 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 属性可以为按钮包裹一个 Tooltip。这对于仅图标按钮、禁用按钮，或任何需要额外上下文帮助用户理解该操作的情况都很实用。

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

带 Tooltip 的链接

与 Button 一样，向 LinkButton 传入 title 即可为其包裹 Tooltip。这会在悬停和聚焦时呈现额外的上下文信息。

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 可通过 Tooltip 解释其不可用的原因。

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 参考

PropTypeDefaultDescription
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--