胶囊按钮

用途

窗口内容区表单与对话框的按钮行。一个视图内至多一枚着色钮(主操作或破坏性主钮),其余保持玻璃。用例参考:「保存 / 取消」「确定选中」、对话框按钮行、危险操作入口「清空」。

变体

• 主(prominent):强调蓝填充,视图内唯一主操作,对话框中响应 Return——对应原生「默认按钮吃回车」;蓝 #0090FF 为本库强调蓝,与 Apple systemBlue 同族(明 #007AFF / 暗 #0A84FF),浅边 #BAE4FA 拟玻璃受光边缘。
• 普通(glass):Liquid Glass regular 材质——半透明底(明 gray-100/70 / 暗 black/30)+ backdrop-blur + 白描边拟高光;「取消」位,对话框中由 Esc 触发。
• 破坏性红字:普通形制换 systemRed 红字 #ff453a——内容区里的危险操作入口(如「清空」),后接确认弹窗。
• 破坏性主钮:红底 rgba(255,69,58,.25) + 红字 #FF383D + 浅红描边 #FAC4BE——确认弹窗中的执行位,替换主钮的蓝,警示「按下即毁」。

设计规范 · macOS 26 / 27

• 胶囊外形对应 macOS 26 大号控件的默认 capsule;主 / 玻璃两形分别对应 SwiftUI .buttonStyle(.glassProminent) 与 .buttonStyle(.glass)。
• 着色即语义(主操作 / 破坏性),而非装饰——HIG 要求每个视图至多一枚着色钮;破坏性语义用 systemRed 传达。
• 按钮行布局:表单底部右对齐、间距 gap-2.5,取消在左、确认在右;NSAlert 风格对话框中按钮 flex-1 等宽铺排。

状态与交互

• hover:明色加深、暗色提亮,两种外观分别校准(主钮 #0087F6 / #0C9AFF,玻璃 gray-200/70 / white/5);transition-colors 200ms。
• disabled:文字 50% + cursor-not-allowed,底色保持,靠文字弱化表达不可用。
• 玻璃上的文字用不透明 label 色,保证半透明材质上的可读性。

参考实现

Web 参考:PillButton.vue——primary / destructive 两个 prop 组合出四变体(primary + destructive = 破坏性主钮)。原生对应 NSButton / NSAlert 按钮。