# 按钮规范

设计稿:统一设计项目「组件-按钮规范.dc.html」;完整决策档案见 `.trellis/tasks/archive/**/07-24-button-spec-rollout/design.md`。

## 七个合法变体(新增按钮先对号入座,禁用 secondary / tertiary / dashed / warning)

| 写法 | 用途 |
|---|---|
| `type="primary"` | 区块唯一主操作(保存/登录/新建);一个区块至多一个 |
| (无 type) | 并列次操作(取消/测试/上一步) |
| `quaternary` | 行内轻操作(修改/复制/分页);hover wash 底 |
| `quaternary type="primary"` | 行内肯定动作(绑定/启用);一行至多一个 |
| `quaternary type="error"` | 行内危险入口(删除/解绑);必接 ConfirmPop |
| `type="error"` | 危险最终确认;仅确认层/危险区收尾 |
| `ghost type="error"` | 详情页危险区入口(终止/删除资源) |

## 规则

- 行内(卡片头/表格/列表行尾)一律文字按钮;危险两段式:入口文字红或描边红 → 确认层内才出 Error 实底。
- 尺寸跟容器:页面级工具栏 medium;弹窗底部/筛选条/区块工具行/详情操作条 small;卡片行内/表格 tiny;登录页 large+block。同一容器不混档。
- 图标按钮方形(quaternary 去 circle)且必带 title/tooltip;circle 仅浮层关闭与 VNC 媒体控制。
- 异步必上 loading,宽度稳定、禁重复提交;成功后才关弹层。
- 互斥单选用 `ChoiceChip`(components/ChoiceChip.vue),不用 NButton 动态 type 模拟。
- pressed 色已入 token:accentPressed / errHover / errPressed(tokens.ts + main.css 双处同步)。