BUTTON
分割按钮Split Button
左边是默认主操作、右边一枚下拉箭头展开更多同类选项，二合一省一次点击。
效果预览
适合用在哪
导出/下载（多种格式）、发送（定时/立即）、保存（另存为）。
容易踩的坑
- 左右两段共用一个悬停态，用户意识不到右侧箭头是独立的可点区域。
- 右侧触发区窄于 32px，移动端很难点中，常误触左侧主操作。
- 下拉菜单不支持方向键和 Esc，键盘用户打开后无法选择或关闭。
设计提示词 · Prompt
分割按钮（Split Button）：两段拼接在同一个圆角容器里——左段是默认主操作（实心底、白字、内边距 13px），右段是 26-32px 宽的下拉触发区（同底色、中间 1px 半透明白分隔线、内含 ▾ 箭头）。点击右段弹出对齐的下拉菜单，菜单项就是各可选动作。两段悬停时分别加深（左段、右段独立 hover 态），暗示是两个可点区域。左段执行最常用动作，右段永远只负责展开选项。
Split Button: two segments joined in the same rounded container — the left segment is the default primary action (solid background, white text, 13px padding), the right segment is a 26-32px wide dropdown trigger (same background, a 1px semi-transparent white divider in between, containing a ▾ arrow). Clicking the right segment opens an aligned dropdown menu whose items are the alternative actions. Each segment darkens independently on hover (separate hover states for left and right), hinting that they are two clickable areas. The left segment performs the most common action; the right segment only ever opens the options.
常见搭配
同一页面里经常和「分割按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:20px 0">
<span class="d-splitbtn">
<button class="d-splitbtn__main">导出报表</button>
<button class="d-splitbtn__arrow">▾</button>
</span>
</div>