按钮组
Button Group
初级通用按钮组（Button Group）是把几个相关操作按钮放在一起呈现的界面组件。它让用户看出这些操作属于同一件事，也更容易比较和选择，例如在图片预览旁集中放置“旋转”“裁剪”“下载”。
你可能会说：「把这几个处理图片的按钮放在一起，让人看出它们是一组操作。」
动手看看商品图片预览工具栏
春季新品主图
图片 1 / 4
按钮排列方式
预览显示方式
切换按钮排列方式，看看同样的图片工具如何改变关联感。也可以悬停按钮、按 Tab 聚焦，观察每个操作的反馈。
旋转、裁剪、下载共用一个外框，一眼就能看出它们都在处理当前图片。操作相关、空间又紧时，集中排列很合适。
要点按钮组是怎么把操作组织起来的？
- 1
先看按钮是否服务同一件事
做图片编辑器时，“向左旋转”和“向右旋转”可以放成一组，因为用户是在处理同一张图片。如果把“退出账号”也塞进去，位置虽然挨得近，含义却不成组。
- 2
排列方式帮助用户认出关系
组内按钮可以紧挨着，也可以留少量间距；关键是它们与组外操作的距离、边框和背景能让人看出边界。这样用户扫过工具栏时，更容易找到一类操作。
- 3
每个按钮仍有自己的行为
按钮组负责组织，不会自动决定按钮能否同时生效。比如后台列表里的“导出”和“打印”各自执行操作；如果你想让用户在几个视图中只选一个，就要另外说明选中规则。
容易混淆的地方
按钮组强调把相关按钮组织在一起，不等于分段控件：后者通常用相邻选项切换一个当前值，比如“按天／按周”查看数据。它也不同于标签页；标签页的切换对应不同内容面板。判断时先问：用户是在触发几个相关操作，还是在选择当前值、切换内容？
什么时候用
适合用
- 图片编辑器里有“左旋”“右旋”“裁剪”，把这些处理当前图片的操作集中在预览区旁。
- 后台表格上方有“导出”“打印”等针对当前列表的操作，希望用户能快速找到这一组工具。
- 文本编辑器的工具栏里，把“加粗”“斜体”“下划线”等格式操作放在相邻位置。
不适合用
- 如果只是让用户去“账单页面”和“设置页面”，用导航链接或菜单更贴切，不必做成按钮组。
- 如果用户要在“日视图”“周视图”中选一个当前模式，可以考虑分段控件，重点是呈现当前选中了哪项。
- 如果选项会切换整块内容面板，比如“概览”和“成员”各有一页内容，用标签页更容易表达这种关系。
练一练选一个答案，看看解释
你在做一个后台表格，表格上方需要提供“导出 CSV”“打印”和“删除所选记录”。这三个操作都针对当前表格，用户可以分别触发。你会怎样组织它们？
让 AI 帮你做复制给 AI Agent 直接用
请把后台表格上方的“导出 CSV”“打印”“删除所选记录”做成一个按钮组。它们都作用于当前表格，各自点击后执行对应操作；让删除操作在视觉上与另外两项有所区分，并保留清晰的按钮名称。