BUTTON
按钮组Button Group
多个按钮连成一条、共享外框，用内部 1px 分隔线代替各自描边。
效果预览
适合用在哪
视图切换、格式工具栏、分页控件、密度选择。
容易踩的坑
- 子按钮各自保留边框，相邻处出现 2px 双线，看起来像拼错的表格。
- 选中态只靠浅灰底区分，对比度不足 3:1，色弱用户分不清当前选项。
- 选项超过 5 个仍硬塞一行，移动端溢出换行后外框圆角被破坏。
设计提示词 · Prompt
按钮组（Button Group）：外层容器统一承担 1px 描边 + 圆角 + overflow:hidden，内部按钮之间只用 1px 分隔线（不用各自的边框），第一个和最后一个按钮的圆角交给容器裁切。选中项用灰底 + 650 字重，悬停浅灰底。整组宽度按内容自适应，也可以做等宽填充。按钮组表达的是"互斥的单选项"，如果操作彼此独立就别用组，分开摆。
Button Group: the outer container takes the 1px border + border radius + overflow:hidden; buttons inside are separated only by 1px dividers (no individual borders), and the corners of the first and last buttons are clipped by the container. The selected item uses a gray background + 650 font weight; hover uses a light gray background. The group width adapts to content, or can be equal-width fill. A button group expresses "mutually exclusive single choices"; if the actions are independent of each other, don't group them — place them separately.
常见搭配
同一页面里经常和「按钮组」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-btngroup"> <button>列表</button> <button class="is-on">卡片</button> <button>表格</button> </div>