Preview Updated 2026-05-10

ButtonGroup 按钮组

把多个 CfButton 拼成连接式或分离式的一组，逻辑上代表"对同一对象的一组动作"。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

何时使用

一组动作针对同一对象（对齐工具 / 复制粘贴 / 排序方向），可视为 “一个控件”。
多按钮间是互斥单选或多选切换的场景：用 CfToggleGroup 而不是 ButtonGroup。

基础用法

variant="attached"（默认）共享圆角与边框，看起来像一个控件；variant="separated" 留间距，按钮各自独立。 orientation="vertical" 把它竖起来。

背景视口

src/App.vue

<script setup lang="ts">
import { CfButtonGroup, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <CfButtonGroup aria-label="对齐方式">
      <CfButton variant="tertiary">左</CfButton>
      <CfButton variant="tertiary">中</CfButton>
      <CfButton variant="tertiary">右</CfButton>
    </CfButtonGroup>
    <CfButtonGroup variant="separated" aria-label="操作组">
      <CfButton variant="secondary">复制</CfButton>
      <CfButton variant="secondary">剪切</CfButton>
      <CfButton variant="secondary">粘贴</CfButton>
    </CfButtonGroup>
    <CfButtonGroup orientation="vertical" aria-label="纵向">
      <CfButton variant="tertiary">上移</CfButton>
      <CfButton variant="tertiary">下移</CfButton>
      <CfButton variant="tertiary">删除</CfButton>
    </CfButtonGroup>
  </div>
</template>

<script setup>
import { CfButtonGroup, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <CfButtonGroup aria-label="对齐方式">
      <CfButton variant="tertiary">左</CfButton>
      <CfButton variant="tertiary">中</CfButton>
      <CfButton variant="tertiary">右</CfButton>
    </CfButtonGroup>
    <CfButtonGroup variant="separated" aria-label="操作组">
      <CfButton variant="secondary">复制</CfButton>
      <CfButton variant="secondary">剪切</CfButton>
      <CfButton variant="secondary">粘贴</CfButton>
    </CfButtonGroup>
    <CfButtonGroup orientation="vertical" aria-label="纵向">
      <CfButton variant="tertiary">上移</CfButton>
      <CfButton variant="tertiary">下移</CfButton>
      <CfButton variant="tertiary">删除</CfButton>
    </CfButtonGroup>
  </div>
</template>

import { CfButton, CfButtonGroup } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfButtonGroup>
      <CfButton variant="tertiary">左</CfButton>
      <CfButton variant="tertiary">中</CfButton>
      <CfButton variant="tertiary">右</CfButton>
      </CfButtonGroup>
    </>
  );
}

import { CfButton, CfButtonGroup } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfButtonGroup>
      <CfButton variant="tertiary">左</CfButton>
      <CfButton variant="tertiary">中</CfButton>
      <CfButton variant="tertiary">右</CfButton>
      </CfButtonGroup>
    </>
  );
}

API

属性	类型	默认值	说明
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	排列方向
`variant`	`'attached' \| 'separated'`	`'attached'`	连接式 / 分离式
`size`	`'sm' \| 'md' \| 'lg'`	—	给子按钮统一尺寸
`ariaLabel`	`string`	—	给 `<div role="group">` 一个名字，配合 screen reader