按钮组

用途

工具栏内多枚相关图标钮的分组容器,与独立主钮拉开区隔。用例参考:「隐藏/显示侧边栏」+「重新扫描」共组一枚胶囊,尾随的「全部完成」主钮独立在外。

设计规范 · macOS 26 / 27

• 对应 NSToolbarItemGroup——macOS 26 上按钮组渲染为共享玻璃背景的一块胶囊。
• Liquid Glass 规则:玻璃不采样玻璃、忌玻璃叠玻璃——成组时由容器持有材质(胶囊底 + 描边 + 阴影),子钮保持透明、hover 才显色;与 SwiftUI 用 GlassEffectContainer 合并多枚玻璃件同理。
• 分组本身传达「这些操作相关」(WWDC25 Landmarks 工具栏示例的分组建议);外容器 rounded-full 与子钮圆形同心。

状态与交互

• 子钮 hover 各自显色(gray-200/70 / white/5),组容器自身无交互态。
• p-0.5 + gap-1.5 维持玻璃内衬节奏,子钮不外溢容器圆角。

参考实现

Web 参考:IconButtonGroup.vue(容器)+ RoundIconButton.vue 的 grouped 变体(透明底子钮);原生对应 scaffolds.toolbar_group()。只组合普通操作,着色主钮独立放置、不入组。