Button Group 按钮组

import { Button, ButtonGroup, DropdownMenu } from "@lark-ui/core";
import { CaretDownIcon } from "@phosphor-icons/react";

/**
 * 分裂按钮：主操作与下拉触发器组合在一起，用于承载相关的次要操作。
 * 箭头按钮使用 `shape="square"` 并带有 `aria-label`。
 */
export function ButtonGroupSplitDemo() {
  return (
    <ButtonGroup aria-label="部署">
      <Button variant="primary">部署</Button>
      <DropdownMenu>
        <DropdownMenu.Trigger
          render={
            <Button variant="primary" shape="square" aria-label="更多部署选项">
              <CaretDownIcon />
            </Button>
          }
        />
        <DropdownMenu.Content>
          <DropdownMenu.Item>部署到预发布环境</DropdownMenu.Item>
          <DropdownMenu.Item>部署并跟踪日志</DropdownMenu.Item>
          <DropdownMenu.Item>安排部署…</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </ButtonGroup>
  );
}

何时使用

ButtonGroup 将少量紧密关联的按钮组合为一个整体控件，最常见的形式是分裂按钮：一个主要操作，旁边配一个用于承载相关次要操作的下拉触发器。

需要把多个彼此独立的按钮或输入框组合起来？ 请改用工具栏（Toolbar）。工具栏（例如格式工具条或页面级的一组操作）需要漫游焦点（roaming focus）的键盘语义，而 ButtonGroup 有意不提供该能力。

安装

统一导出

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

按需导出

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

用法

ButtonGroup 是一个布局容器。其子元素仍保留各自的 variant、size 和 shape，按钮组只会把内侧圆角压平并让边框重叠，从而让多个按钮共用一条接缝。请为按钮组添加描述该操作的 aria-label，并为下拉触发器添加它自己的 aria-label。

import { Button, ButtonGroup, DropdownMenu } from "@lark-ui/core";
import { CaretDownIcon } from "@phosphor-icons/react";

export default function Example() {
return (
  <ButtonGroup aria-label="Deploy">
    <Button variant="primary">Deploy</Button>
    <DropdownMenu>
      <DropdownMenu.Trigger
        render={
          <Button
            variant="primary"
            shape="square"
            aria-label="More deploy options"
          >
            <CaretDownIcon />
          </Button>
        }
      />
      <DropdownMenu.Content>
        <DropdownMenu.Item>Deploy to staging</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  </ButtonGroup>
);
}

示例

分裂按钮

把主要操作与用于次要操作的下拉触发器组合在一起。

import { Button, ButtonGroup, DropdownMenu } from "@lark-ui/core";
import { CaretDownIcon } from "@phosphor-icons/react";

/**
 * 分裂按钮：主操作与下拉触发器组合在一起，用于承载相关的次要操作。
 * 箭头按钮使用 `shape="square"` 并带有 `aria-label`。
 */
export function ButtonGroupSplitDemo() {
  return (
    <ButtonGroup aria-label="部署">
      <Button variant="primary">部署</Button>
      <DropdownMenu>
        <DropdownMenu.Trigger
          render={
            <Button variant="primary" shape="square" aria-label="更多部署选项">
              <CaretDownIcon />
            </Button>
          }
        />
        <DropdownMenu.Content>
          <DropdownMenu.Item>部署到预发布环境</DropdownMenu.Item>
          <DropdownMenu.Item>部署并跟踪日志</DropdownMenu.Item>
          <DropdownMenu.Item>安排部署…</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </ButtonGroup>
  );
}

次要

分裂按钮适用于任意按钮变体。

import { Button, ButtonGroup, DropdownMenu } from "@lark-ui/core";
import { CaretDownIcon } from "@phosphor-icons/react";

/**
 * 分裂按钮适用于任何按钮变体——这里使用次要样式来承载弱化强调的操作。
 */
export function ButtonGroupSecondaryDemo() {
  return (
    <ButtonGroup aria-label="保存">
      <Button variant="secondary">保存</Button>
      <DropdownMenu>
        <DropdownMenu.Trigger
          render={
            <Button
              variant="secondary"
              shape="square"
              aria-label="更多保存选项"
            >
              <CaretDownIcon />
            </Button>
          }
        />
        <DropdownMenu.Content>
          <DropdownMenu.Item>保存为草稿</DropdownMenu.Item>
          <DropdownMenu.Item>保存并发布</DropdownMenu.Item>
          <DropdownMenu.Item>保存副本…</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </ButtonGroup>
  );
}

尺寸

让两个按钮的 size 保持一致，以使分裂按钮对齐。

import { Button, ButtonGroup, DropdownMenu } from "@lark-ui/core";
import { CaretDownIcon } from "@phosphor-icons/react";

/**
 * 两个按钮使用相同的 `size`，以保证分裂按钮对齐。
 */
export function ButtonGroupSizesDemo() {
  const sizes = ["sm", "base", "lg"] as const;
  return (
    <div className="flex flex-wrap items-center gap-4">
      {sizes.map((size) => (
        <ButtonGroup key={size} aria-label="部署">
          <Button size={size} variant="primary">
            部署
          </Button>
          <DropdownMenu>
            <DropdownMenu.Trigger
              render={
                <Button
                  size={size}
                  variant="primary"
                  shape="square"
                  aria-label="更多部署选项"
                >
                  <CaretDownIcon />
                </Button>
              }
            />
            <DropdownMenu.Content>
              <DropdownMenu.Item>部署到预发布环境</DropdownMenu.Item>
              <DropdownMenu.Item>安排部署…</DropdownMenu.Item>
            </DropdownMenu.Content>
          </DropdownMenu>
        </ButtonGroup>
      ))}
    </div>
  );
}

API 参考

属性	类型	默认值	说明
className	`string`	-	通过 `cn()` 合并的额外 CSS 类名。仅使用 lark 语义化 token。
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
children	`ReactNode`	-	需要组合在一起、联系紧密的控件。通常是两个 `Button`：一个主要操作和一个下拉触发器（“分体按钮”）。

Lark