按钮

Button

也常被叫作：操作按钮提交按钮那个可以点的方块

界面与组件通常止于「主路径」约 1 分钟读完

你可能会这么说

「帮我加个东西，点一下就能把内容存下来。」

按钮 Button

让用户在当前页面执行「保存 / 提交 / 删除」这类动作的可点击控件。

按钮的核心是执行动作，不是去别的地方。点按钮，事情在这一页发生了变化：数据被保存、消息被发送、条目被删除。点链接，你被带到另一个页面。这个区别不是学术洁癖——它直接决定用户能不能预判点下去会发生什么，也决定读屏软件怎么念它。

同一个操作区里只应该有一个主要按钮。如果你看到三个同样醒目的按钮并排，那不是「选择丰富」，是设计者没想清楚哪个才是用户最该做的事。其余动作降级成次要按钮或文字按钮。

还有一个常被忽略的点：按钮的文案要能独立回答「点完会发生什么」。「确定」是最差的按钮文案之一，因为它什么都没说。「保存修改」「删除这条评论」才是有信息的。

长什么样真实可交互，不是截图

删除这个项目？

删除后无法恢复，项目里的 12 条记录会一起消失。

上面的按钮是真的可以点、可以聚焦、可以用键盘 Tab 到的元素，不是截图。注意危险动作用的是红色而不是主色。

拆开看，里面有这几块

1
按钮本体 Button
整块可点击区域。移动端高度至少 44px，否则手指点不准。
2
文案 Label
动词开头，说清点完会发生什么。避免「确定」「提交」这种空话。
3
图标 Icon
可选，用来强化动作含义。只有图标时必须给它一个读屏能念出来的名字。
4
状态 State
默认 / 悬停 / 按下 / 聚焦 / 加载中 / 禁用。少做一个，用户就会重复点击。

常见的有哪几种

主要按钮Primary

同一区域里最重要的那个动作，一个就够。

用在：保存、提交、下一步

次要按钮Secondary / Outline

退一步的动作，视觉上要明显弱于主要按钮。

用在：取消、返回

文字按钮Text / Ghost

最轻量的动作，几乎没有边框和背景。

用在：展开详情、收起

危险按钮Danger

不可挽回的操作专用，通常配一次确认。

用在：删除、清空、注销

加载与禁用Loading / Disabled

提交中要禁用并给出反馈，否则用户会连点三次，产生三条数据。

用在：表单提交、上传

容易搞混？这样区分

按钮 ≠ 链接 Link

按钮做事，链接去地方。判断方法：如果这个东西应该能「在新标签页打开」，它就该是链接；如果新标签页打开毫无意义（比如「删除」），它必须是按钮。

看链接

按钮 ≠ 分段控件 Segmented

分段控件表示「一组选项里当前选中了哪个」，是状态；按钮表示「点了就执行一次」，是动作。用按钮做视图切换，用户看不出当前在哪个视图。

什么时候用得上

表单提交

主按钮放在表单末尾，提交中禁用并显示「提交中…」，成功后给明确反馈。

删除确认

危险动作用红色按钮，并在弹窗里说明「删了会失去什么」，而不是只问「确定吗」。

空状态引导

列表为空时给一个主按钮直接开始，比一句「暂无数据」有用得多。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [账号设置页] 的操作区，不动其他页面
【目标】把「保存资料 / 放弃修改 / 删除账号」做成三个明确的按钮，层级要分清：
  - 保存资料 = 主要按钮
  - 放弃修改 = 次要按钮
  - 删除账号 = 危险按钮，点击后先弹确认，确认文案要说明会丢失什么
  - 「重设密码」保持为链接，因为它是跳转到另一个页面
【边界】不要改页面布局和配色；不要改字段和校验规则；不要新增依赖
【状态要求】保存过程中按钮必须禁用并显示进行中，防止重复提交
【交付】告诉我改了哪些文件、我打开哪个地址点哪一步能看到、哪部分你没验证

注意这段话为什么有效：它把「层级」明确写成了主/次/危险三档，AI 就不用猜；它写了「不要改什么」，挡掉了顺手重构；它要求了防重复提交，这是最常被漏掉的状态。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

用鼠标点主按钮，动作真的发生了：数据变了、页面有明确反馈，不是只有一个 loading 转圈然后什么都没变。
只用键盘：Tab 能聚焦到每个按钮，聚焦时有可见的轮廓，回车能触发。
提交过程中按钮变成禁用态；快速连点三次，结果只产生一条数据。
危险按钮点下去先出确认，确认文案说清了会丢什么，取消真的取消。
手机尺寸（或浏览器缩到 375px 宽）下按钮没有挤成一行、高度不低于 44px。

它常这么糊弄你

「按钮已添加」——但点下去只有视觉反馈，实际什么都没保存。一定要自己点一次并刷新页面看结果。
用 <div> 加点击事件冒充按钮：鼠标能点，键盘和读屏用户完全用不了。让它确认用的是真正的按钮元素。
三个按钮做成一样醒目，声称「都是重要操作」。这是没做层级，不是需求特殊。
禁用态只是变灰但仍可点击，连点会产生重复数据。

这一条能做到「主路径」层：你自己点一遍就验完了，不需要看代码。凡是能靠亲手点验证的事，就不要接受「已完成」的口头汇报。

考考你选一个你觉得对的

账号设置页上有：保存资料、放弃本次修改、删除账号、前往重设密码。怎么安排最合适？

想再深挖一点靠谱出处

Button Pattern（按钮模式）W3C WAI-ARIA APG ↗<button>：按钮元素MDN ↗

# 按钮 (Button)

> 让用户在当前页面执行「保存 / 提交 / 删除」这类动作的可点击控件。

**你可能会这么说**：帮我加个东西，点一下就能把内容存下来。

按钮的核心是执行动作，不是去别的地方。点按钮，事情在这一页发生了变化：数据被保存、消息被发送、条目被删除。点链接，你被带到另一个页面。这个区别不是学术洁癖——它直接决定用户能不能预判点下去会发生什么，也决定读屏软件怎么念它。 同一个操作区里只应该有一个主要按钮。如果你看到三个同样醒目的按钮并排，那不是「选择丰富」，是设计者没想清楚哪个才是用户最该做的事。其余动作降级成次要按钮或文字按钮。 还有一个常被忽略的点：按钮的文案要能独立回答「点完会发生什么」。「确定」是最差的按钮文案之一，因为它什么都没说。「保存修改」「删除这条评论」才是有信息的。

**也叫**：操作按钮、提交按钮、那个可以点的方块

## 你可以这样告诉 AI

```text
【范围】只改 [账号设置页] 的操作区，不动其他页面
【目标】把「保存资料 / 放弃修改 / 删除账号」做成三个明确的按钮，层级要分清：
  - 保存资料 = 主要按钮
  - 放弃修改 = 次要按钮
  - 删除账号 = 危险按钮，点击后先弹确认，确认文案要说明会丢失什么
  - 「重设密码」保持为链接，因为它是跳转到另一个页面
【边界】不要改页面布局和配色；不要改字段和校验规则；不要新增依赖
【状态要求】保存过程中按钮必须禁用并显示进行中，防止重复提交
【交付】告诉我改了哪些文件、我打开哪个地址点哪一步能看到、哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 用鼠标点主按钮，动作真的发生了：数据变了、页面有明确反馈，不是只有一个 loading 转圈然后什么都没变。
- [ ] 只用键盘：Tab 能聚焦到每个按钮，聚焦时有可见的轮廓，回车能触发。
- [ ] 提交过程中按钮变成禁用态；快速连点三次，结果只产生一条数据。
- [ ] 危险按钮点下去先出确认，确认文案说清了会丢什么，取消真的取消。
- [ ] 手机尺寸（或浏览器缩到 375px 宽）下按钮没有挤成一行、高度不低于 44px。

常见糊弄：
- 「按钮已添加」——但点下去只有视觉反馈，实际什么都没保存。一定要自己点一次并刷新页面看结果。
- 用 <div> 加点击事件冒充按钮：鼠标能点，键盘和读屏用户完全用不了。让它确认用的是真正的按钮元素。
- 三个按钮做成一样醒目，声称「都是重要操作」。这是没做层级，不是需求特殊。
- 禁用态只是变灰但仍可点击，连点会产生重复数据。

来源：https://mickerbook.com/reference/t/button/