按钮怎么选：Primary / Secondary / Ghost / Danger

它是什么

按钮是用户“触发一个动作”的最直接方式。但不是所有操作都一样重要。一个博客可能有“发布文章”（用户真正想做的）和“返回”（返回上一页），如果两个按钮颜色一样大小一样，用户会困惑哪个是真正要点的。

按钮的变体（颜色、样式、尺寸）存在的唯一目的：帮助用户一眼看出每个操作的重要程度。

技术标注

考虑点	决策
对比度	所有按钮文字与背景 ≥ 4.5:1（WCAG AA）；Deep Cinnabar (#A33418) hover 仍达标
触达区	移动端最小 44x44px；桌面 40x40px 可接受
焦点态	用户按 Tab 时必须有可见 Focus Ring（Cinnabar 边框或轮廓）
禁用态	disabled 属性 + aria-disabled="true" + 视觉淡化（opacity 0.5）
加载态	显示 Spinner + 文案「登陆中…」+ 禁用按钮（防重复点击）

什么时候用这个词

做设计决策时

场景 1：表单提交

表单有三个按钮：「保存」「保存草稿」「取消」

用户思考过程：
  1. 我想要的是什么？→ 保存文章
  2. 如果不确定呢？→ 先保存草稿
  3. 改主意了？→ 取消

按钮策略：
  「保存」→ Primary（用户的主目标）
  「保存草稿」→ Secondary（必要但不是第一选择）
  「取消」→ Ghost（用户可能根本不需要点）

视觉结果：
  用户一眼看到红色「保存」，知道这是推荐操作 ✓
  「保存草稿」次一级，用户可以看到它但不会误点
  「取消」淡到背景里，真的想取消的人能找到它

场景 2：列表操作

商品卡片上有两个操作：「加入购物车」「收藏」

加入购物车 → Primary（这是网站想要的主转化）
收藏 → Ghost（用户可能想，但不是网站目标）

如果两个都是 Secondary，用户不知道哪个优先 ✗

场景 3：破坏性操作

删除文章的弹窗有两个按钮：「删除」「保留」

保留 → Secondary（默认安全选项）
删除 → Danger（用户选它前会二思）

绝对不要「删除」用 Primary 品牌红——那是商业色，
不是警告色，会误导用户觉得"这是网站想要的" ✗

给 agent 发指令时

你现在要为一个任务管理应用设计「任务卡片」的操作按钮。

需求：
- 卡片上有「标记完成」「编辑」「删除」三个操作
- 移动端友好（44px 高）
- 按钮必须清晰表达操作的重要性和风险

你的按钮选择应该是：
- 「标记完成」→ Primary（用户最常做的操作）
- 「编辑」→ Secondary（次要但常用）
- 「删除」→ Danger（破坏性，要警示）

生成 HTML + CSS，包括所有状态（hover/active/disabled/loading）。

常见错误

❌ 错误 1：所有按钮都是 Primary 色

形成的问题：
- 用户不道哪个是推荐操作
- 页面显得"吵"（一堆红按钮）
- 可访问性：使用屏幕阅读器的用户听不出优先级

正确做法：一个页面最多 1-2 个 Primary，其他用 Secondary/Ghost

❌ 错误 2：用 Primary 做破坏性操作

按钮：「删除」（红色）

用户理解：网站想让我删除？这个红色看起来像"推荐操作"...
结果：用户误点删除，后悔莫及

正确做法：删除用 Danger 色 #A02C2C（暗红，有警示感）

❌ 错误 3：Ghost 按钮文字太小或颜色太淡

「忘记密码？」用 Ghost 但字色 #CCCCCC（太浅）

问题：看不清楚、对比度不足（WCAG 不过）
用户根本看不到这个选项

正确做法：Ghost 文字用 Cinnabar #C13E23，和 Primary 一样色
关键是没有背景，用户才觉得"不重要"

❌ 错误 4：加载时没有禁用按钮

用户点登陆 → 网络慢 → 用户再点一次 → 重复请求 → 后端报错

正确做法：Loading 时 disabled + cursor: not-allowed
防止重复提交

相关词条

• №01「Card」 — 卡片上通常有多个按钮，需要用变体区分重要性
• №02「Tabs」 — Tab 切换有时也用类似的“当前 vs 非当前”的视觉区分逻辑
• №03「Link vs Button」 — 什么时候用 Button，什么时候用 Link
• №04「Loading Spinner」 — 按钮加载态配合 Spinner
• №05「Focus Ring」 — 键盘用户必须能通过 Focus 看出按钮在哪

完整可复制的 Prompt

设计一个任务管理应用的「任务卡片」中的操作按钮组。

需求：
1. 三个操作按钮：
   - 「标记完成」(primary) — 用户最常用的操作
   - 「编辑」(secondary) — 次要操作
   - 「删除」(danger) — 破坏性操作，需要确认

2. 设计约束：
   - 配色遵循 TellYourAgent 设计系统
     * Primary：Cinnabar #C13E23（hover #A33418）
     * Secondary：边框 Ink-2 #6B675F
     * Danger：Error #A02C2C
   - 所有文字与背景对比度 ≥ 4.5:1（WCAG AA）
   - 移动端最小触达区 44x44px
   - Border radius 6px

3. 所有按钮状态：
   - Normal：基础样式
   - Hover：颜色变化 + 不抬升（不加阴影）
   - Active：缩小 0.98（按下感）
   - Disabled：opacity 0.5 + cursor: not-allowed
   - Loading：Spinner + 文案「操作中...」+ 禁用

4. 响应式：
   - 桌面（≥768px）：三个按钮并排，每个自适应宽度
   - 移动（<768px）：三个按钮堆叠（每行一个），full-width

5. 可访问性：
   - 每个按钮都有清晰的 aria-label（对屏幕阅读器）
   - Focus Ring 可见（outline 2px solid Cinnabar）
   - 键盘用户可以 Tab 遍历所有按钮

输出：
- HTML 结构（语义化，用 <button> 不是 <div>）
- CSS（包括所有状态、媒体查询、focus-visible）
- JavaScript（如需 Loading 态演示）
- 使用说明（何时用哪种按钮）

---

实施步骤

1. 定义色彩系统（在 DESIGN.md 中已有）

   • Primary: #C13E23 → hover: #A33418
   • Secondary: 边框 #6B675F
   • Danger: #A02C2C

2. 建立 CSS 类名系统

   .button           /* 基础样式：高度、圆角、字号 */
   .button-primary   /* 背景 + 文字色 */
   .button-secondary /* 边框 + 透明背景 */
   .button-ghost     /* 只有文字 */
   .button-danger    /* Danger 背景 */
   .button:disabled  /* 禁用态 */
   .button.loading   /* 加载态 */

3. 演示组件（在 TellYourAgent 网站上实时展示）

   • 四种变体的对比
   • 所有状态转换动画
   • 响应式预览
   • 可访问性检查反馈

4. 实测 Prompt 用生成的 Prompt 给 Claude 或其他 LLM，验证它能生成高质量的按钮代码。

---

为什么这个决策很重要

按钮看起来很简单，但它是整个界面信息层级传达的基础。

• 用户用眼睛扫描页面，首先看到什么？大多数情况是最红、最突出的按钮
• 如果你把“删除”做成主按钮色，用户会莫名其妙地删除东西
• 如果所有按钮都一样，用户无法快速判断“这个操作安全吗”

一句话：按钮的样式不是装饰，是对用户的指引。选对了，用户体验提升；选错了，用户会误操作。