Split Button
分裂按钮
WebDesktop上手难度: 进阶
左边是默认动作、右边是下拉箭头，点右边能看到同一动作的其他选项。
Live Demo
真的可以点还没执行任何操作
你刚才看到的这个：Word 里的「粘贴 ▼」——点左边直接粘贴默认格式，点右边可以选择「保留源格式 / 只保留文本」。
它到底是什么
Split Button 解决「默认动作 + 变体」这个具体问题：用户 90% 的时间点左边，10% 的时候点右边选变体。它比「一个按钮 + 旁边一个下拉」更紧凑，也比纯下拉更快。
分裂按钮split button主从按钮组合按钮dropdown button combo
Anatomy · 它由什么组成
Main Action主动作区
左侧，占约 70% 宽度
Divider分隔线
1px，与按钮同色或半透明
Toggle Zone下拉触发区
右侧，带 ChevronDown
Menu弹出菜单
点击后向下展开
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 有一个默认动作，且存在 2–4 个常用变体 | 用 |
| 默认动作使用率远高于变体 | 用 |
| 工具栏空间紧张但又需要暴露变体 | 用 |
| 所有选项使用率相当 | 不用 |
变体超过 5 个时，右侧应该换成独立的 Menu 按钮。
在移动端手指精度低，34px 宽的箭头区很难点中。
Similar Patterns
别搞混一句话区分：左边是默认动作、右边是下拉箭头，点右边能看到同一动作的其他选项。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
做一个 Split Button：主区「粘贴」，右侧箭头展开菜单，含「保留源格式 / 只保留文本 / 纯文本」三项。
不要只对 AI 说
Bad → Better不要这样对 AI 说
按钮带个小箭头可以展开。
改成这样说
做 Split Button：左侧主动作「粘贴」，右侧 1px 分隔的箭头区（aria-haspopup="menu"）展开变体菜单，两区圆角拼成一个整体。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。