分体按钮
Split Button
别名:分裂按钮组合按钮带下拉的按钮主副按钮split button
这是什么
由主操作区与附属箭头组成的复合按钮：主区直接执行默认动作，箭头展开同组的备选菜单。比「按钮加独立下拉」少一次定位，比整键打开菜单的下拉按钮更快命中高频操作，常用于保存、发送、新建等带变体的动作。
名词辨析
与 Dropdown 的差别是主区可直接执行默认动作；与「按钮加独立菜单」的差别是箭头在视觉与焦点上都附着于主按钮。
交互实验室
试一试，再决定怎么用分别点击主区与箭头，对比一次执行默认动作与展开备选菜单。
正在加载实验室…
使用时关注什么
- 01主区与箭头是两个独立可聚焦目标
- 02菜单打开时箭头呈展开态，Esc 收起并焦点归位
✓ 适用场景
- 存在一个高频默认动作，外加若干同组变体
- 希望默认动作一次点击即可执行
- 工具栏或表单操作区空间紧凑
✕ 不适用场景
- 没有明确默认动作，所有选项同等重要，用 dropdown
- 备选动作与主动作无关，拆成 button 加 menu 更清晰
- 只有一个动作，普通 button 足够
常见形式
水平分体
Horizontal
主区与箭头左右并排，最常见形态
垂直分体
Vertical
箭头堆叠在主区下方，窄工具栏更稳
带图标
With icon
主区含图标加文案，识别更快
实现要点
display: inline-flexborder-radius: 0position: relative两个按钮并排放在 inline-flex 中，接缝处去掉圆角与左边框形成一体外观；箭头用窄热区和 chevron 区分。菜单相对容器绝对定位。主区与箭头各自可聚焦，菜单打开后方向键在菜单项间移动，Esc 归位到箭头。
平台 API
<button>aria-haspopup="menu"aria-expanded代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA APG | Menu Button |
| MUI | ButtonGroup |
| Bootstrap | Split button |
相关概念
容易混淆
下拉菜单Dropdown
dropdown 整键打开菜单；split-button 主区执行动作、只有箭头开菜单
按钮Button
普通 button 只有一个动作；split-button 把同组变体收进附属菜单