拆分按钮

Split Button

也叫Split Dropdown Button分裂按钮主按钮加下拉箭头

把默认动作与打开附加动作菜单的箭头组合在一起。

Combines a primary default action with a separate menu of related alternatives.

ANATOMY & USAGE

结构与使用建议

组成部分

主操作按钮
菜单触发按钮
附加动作菜单

适合使用

存在高频默认动作和少量同类变体时。

不建议使用

各动作同等重要或用户容易误触高风险默认动作时。

键盘与无障碍

两个按钮都可独立聚焦；菜单按钮设置 aria-haspopup、aria-expanded 和清楚名称。

DESCRIBE IT TO AI

这样告诉编程助手

实现拆分按钮（Split Button）：把默认动作与打开附加动作菜单的箭头组合在一起。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo row">
  <button id="publish" type="button">立即发布</button>
  <button type="button" aria-label="更多发布选项" aria-haspopup="menu" aria-expanded="false">▾</button>
  <div role="menu" hidden>
    <button role="menuitem" data-action="定时发布">定时发布</button>
    <button role="menuitem" data-action="保存草稿">保存草稿</button>
  </div>
  <output>尚未发布</output>
</div>