圆形图标按钮

用途

工具栏与悬浮玻璃层上的图标操作。主钮居工具栏最尾端,承载本窗唯一主操作,按下即提交收尾;普通钮承载独立的普通操作。用例参考:「全部完成」「更新」(主,对勾图标,可用性由数据校验驱动)、「隐藏/显示侧边栏」、悬浮条「后退」「提取脚本」(普通)。

变体

• 主(prominent):强调色圆钮,对应 NSToolbarItem 的 NSToolbarItemStyleProminent——一条工具栏只保留一枚。
• 普通(glass):独立玻璃圆钮(Liquid Glass regular:半透明底 + blur + 描边高光),对应 bordered NSToolbarItem。
• grouped:透明底子钮,hover 才显色,须置于按钮组容器内——见「按钮组」。

设计规范 · macOS 26 / 27

• 圆形是胶囊在等宽高下的特例,与工具栏其余玻璃件保持同心(concentric)几何;36px(w-9)满足桌面端点击目标下限。
• HIG 工具栏规则:相邻的相关操作应合并进同一块玻璃(见「按钮组」),单独动作才用独立圆钮;AppKit 在 Tahoe 上甚至默认把相邻钮并进一块玻璃,需 NSToolbarItemGroup / 间隔显式控制分组。
• 图标为 SF Symbols 风格手绘路径,currentColor 随文字色;图标语义须自明(如 sidebar.leading 表示侧栏开合)。

状态与交互

• hover 深 / 亮两态与「胶囊按钮」一致;disabled 文字 50%,表达「完成条件未满足」;transition-colors 200ms。
• 必须带 title(悬停提示 + 无障碍名,对应原生 setToolTip_)——纯图标钮的可用性底线。

参考实现

Web 参考:RoundIconButton.vue(primary / 默认 / grouped 三形),图标见 shared/icons.ts;原生对应 scaffolds.toolbar_item(prominent=True) 与 sidebar_toggle_item()。