跳到主要内容
前端术语库

UI 组件 · 操作

按钮组

Button Group

也叫：组合按钮、拆分按钮、按钮组合、ButtonGroup、Split Button、Btn Group

把几个相关的按钮紧挨着拼成一组，共用边框、中间没有空隙，例如「打印 | 导出 | 分享」，或者「发货 ▾」这种主操作带下拉箭头的拆分按钮。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在订单详情的页头右侧放两组按钮：第一组是按钮组「打印 | 导出 | 复制链接」，三个按钮高 32px，相邻按钮共用 1px 边框、中间没有间距，只有最左和最右两端有 6px 圆角，整组加 role="group" 和 aria-label="订单操作"。第二组是一个拆分按钮：左半边是深色主按钮「发货」，点了直接执行；右半边是 32px 宽的 ▾ 箭头，点开下拉菜单「发货并打印面单 / 部分发货 / 预约上门取件」，两半之间有一条细分隔线。按钮点了只执行操作，不保持选中状态。宽度小于 640px 时，第一组收进一个「更多 ⋯」下拉菜单。

发给

01判断

你的内容是这样吗？

对照两列，确认按钮组是不是你要找的。

符合这些情况，用按钮组

  • 几个同类、同样重要的操作要放在一起，例如「打印 / 导出 / 分享」
  • 上一条和下一条、放大和缩小这类成对出现的操作
  • 有一个默认操作和几个变体时，用拆分按钮：默认的直接点，其余收进箭头菜单

是这些情况，换成别的

  • 几个选项只能选一个、并且要一直显示当前选的是哪个（日 / 周 / 月）

    改用分段控制器

  • 主次不同的操作，例如「提交」和「取消」，应该分开摆，用主按钮和次按钮区分

    改用按钮

  • 操作超过 5 个，拼在一起太长，把少用的收进「更多」下拉菜单

    改用下拉菜单

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用按钮组做「日 / 周 / 月」这种只能选一个的切换，点完看不出当前选的是哪个

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    组里每个按钮都是深色主按钮，看不出哪个才是主要操作

  3. 03

    把「删除」这种危险操作和「编辑」「复制」拼在一起，手一滑就点错

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由 2~4 个紧挨着的按钮组成，相邻按钮共用边框、只有两端有圆角；拆分按钮是一个主操作按钮加一个展开下拉菜单的箭头按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1几个按钮紧挨在一起，中间只隔一条细竖线，没有空隙
  2. 2只有整组最左和最右两端是圆角
  3. 3有时一个按钮右侧连着一个小的 ▾ 箭头按钮

04解释

详细解释

按钮组把几个同类操作的 按钮 并排拼在一起：相邻按钮共用一条边框，只有两头有圆角，看起来是一个整体。常见的有详情页上的「上一条 | 下一条」、文档里的「打印 | 导出 | 分享」，以及拆分按钮（Split Button）：左边点了直接执行默认操作「发货」，右边的小箭头展开一个 下拉菜单，里面是「发货并打印面单」「部分发货」这类变体。

最容易和 分段控制器 混：两者外观几乎一样，但分段控制器是「选一个」，日 / 周 / 月里总有一个处于选中状态，切换的是视图；按钮组里每个按钮都是一次性的操作，点完不会一直保持「按下」。只要需要表示「当前选的是哪个」，就用分段控制器或单选框。它也不同于 工具栏：工具栏是一整条横栏，里面可以放好几个按钮组、下拉和搜索框。

一组放 2~4 个同一类、同样重要的操作，尺寸和样式统一；主次不同的按钮（「保存」和「取消」）要分开摆，不要拼成一组。组里最多一个主按钮，拆分按钮的左右两半要能看出是两个点击区域。纯图标的按钮组，每个按钮都要有悬停提示和 aria-label，整组加 role="group" 和一句说明。

开发者信息
术语 ID
component-button-group
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [role="group"]:has(> button + button):not(:has(> [role="radio"], > [aria-pressed]))
  • .btn-group:not(:has(> .btn-check))
  • .ant-btn-group
  • .ant-space-compact:has(> .ant-btn + .ant-btn)
  • .ant-dropdown-button
  • .el-button-group
  • [class*="MuiButtonGroup-root"]
  • .arco-btn-group
  • .n-button-group
  • [data-slot="button-group"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • button-group
  • btn-group
  • buttons-group
  • button-set
  • split-button
  • split-btn
  • btn-split
  • action-group
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • ButtonGroup
  • BtnGroup
  • SplitButton
  • DropdownButton
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30