Button 按钮

import { Button, LarkIcon } from "@lark-ui/core";

export function ButtonBasicDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="secondary">按钮</Button>
      <Button
        variant="secondary"
        shape="square"
        icon={<LarkIcon name="plus" />}
        aria-label="添加"
      />
    </div>
  );
}

安装

统一导出

import { Button } from "@lark-ui/core";

按需导出

import { Button } from "@lark-ui/core/components/button";

用法

import { Button } from "@lark-ui/core";

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

示例

变体

主要

import { Button } from "@lark-ui/core";

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

次要

import { Button } from "@lark-ui/core";

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

幽灵

import { Button } from "@lark-ui/core";

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

危险

import { Button } from "@lark-ui/core";

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

描边

import { Button } from "@lark-ui/core";

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

次要危险

import { Button } from "@lark-ui/core";

export function ButtonSecondaryDestructiveDemo() {
  return <Button variant="secondary-destructive">次要危险</Button>;
}

尺寸

import { Button } from "@lark-ui/core";

export function ButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs" variant="secondary">
        极小
      </Button>
      <Button size="sm" variant="secondary">
        小
      </Button>
      <Button size="base" variant="secondary">
        标准
      </Button>
      <Button size="lg" variant="secondary">
        大
      </Button>
    </div>
  );
}

带图标

import { Button, LarkIcon } from "@lark-ui/core";

export function ButtonWithIconDemo() {
  return (
    <Button variant="secondary" icon={<LarkIcon name="plus" />}>
      新建文档
    </Button>
  );
}

仅图标

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

import { Button, LarkIcon } from "@lark-ui/core";

export function ButtonIconOnlyDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button
        variant="secondary"
        shape="square"
        icon={<LarkIcon name="plus" />}
        aria-label="添加项"
      />
      <Button
        variant="secondary"
        shape="circle"
        icon={<LarkIcon name="plus" />}
        aria-label="添加项"
      />
    </div>
  );
}

加载状态

import { Button } from "@lark-ui/core";

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

禁用状态

import { Button } from "@lark-ui/core";

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

标题

使用 title 属性可为按钮包裹一层工具提示。这对于仅含图标的按钮、禁用的按钮，或任何需要补充上下文来帮助用户理解操作行为的场景都很有用。

import { Button, LarkIcon } from "@lark-ui/core";

/** 演示在启用状态、仅图标和禁用状态的按钮（Button）上使用 title 工具提示。 */
export function ButtonTitleDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="secondary" title="新建文档">
        新建文档
      </Button>
      <Button
        variant="secondary"
        shape="square"
        icon={<LarkIcon name="plus" />}
        aria-label="添加项"
        title="添加项"
      />
      <Button variant="secondary" title="你需要编辑权限才能创建文档" disabled>
        新建文档
      </Button>
    </div>
  );
}

链接形式的按钮

当交互需要跳转到其他位置、但外观仍应像按钮时，请使用 LinkButton。而提交、打开或切换界面等原地操作请使用 Button。

阅读 Link 文档 Lark 文档

import { LinkButton, LarkIcon } from "@lark-ui/core";

/** 演示使用 LinkButton 实现外观类似按钮的导航操作。 */
export function ButtonLinkAsButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <LinkButton href="/components/link" variant="secondary">
        阅读 Link 文档
      </LinkButton>
      <LinkButton
        href="https://developers.cloudflare.com"
        variant="ghost"
        icon={<LarkIcon name="arrow-square-out" />}
        external
      >
        Lark 文档
      </LinkButton>
    </div>
  );
}

带工具提示的链接

与 Button 一样，给 LinkButton 传入 title 即可为它包裹工具提示，在悬停和聚焦时展示额外上下文。

阅读 Link 文档

import { LinkButton } from "@lark-ui/core";

/** 演示在启用状态的 LinkButton 上使用 title 工具提示。 */
export function ButtonLinkTooltipDemo() {
  return (
    <LinkButton
      href="/components/link"
      variant="secondary"
      title="打开 Link 组件文档"
    >
      阅读 Link 文档
    </LinkButton>
  );
}

禁用的链接

在 LinkButton 上设置 disabled，即可渲染出外观像链接、但不可交互的按钮。通过 title 配合工具提示说明它不可用的原因。

import { LinkButton } from "@lark-ui/core";

/** 演示禁用状态的 LinkButton，并用 title 工具提示说明禁用的原因。 */
export function ButtonDisabledLinkDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <LinkButton href="/components/link" variant="secondary" disabled>
        禁用的链接
      </LinkButton>
      <LinkButton
        href="/components/link"
        variant="secondary"
        disabled
        title="你需要编辑权限才能继续"
      >
        带提示的禁用状态
      </LinkButton>
    </div>
  );
}

API 参考

属性	类型	默认值	说明
shape	`"base" \| "square" \| "circle"`	`"base"`	-
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	-
compactSize	`"xs" \| "sm" \| "base" \| "lg"`	-	-
variant	`"primary" \| "secondary" \| "ghost" \| "destructive" \| "secondary-destructive" \| "outline"`	`"secondary"`	-
className	`string`	-	额外的 CSS 类名
children	`ReactNode`	-	子元素
icon	`Icon \| ReactNode`	-	来自 `@phosphor-icons/react` 的图标或 React 元素。渲染在子元素之前。