按钮
Button
初级通用按钮（Button）是让用户触发一个操作的界面控件，比如保存草稿或发送消息。它把可执行的动作摆在用户面前，并通过文案和状态告诉用户点下去会发生什么、当前能不能点。
你可能会说：「我想在页面上放个能点的东西，点了就保存修改，保存期间别让用户重复提交。」
动手看看周报草稿的保存按钮
项目周报修改了目标和风险说明，记得保存。
上次保存：今天 09:42
保存草稿
保存状态
先悬停保存按钮，再按住鼠标看看按下反馈；也可以用 Tab 聚焦按钮，然后切换保存状态。
亮色按钮表示现在可以保存。悬停是在回应鼠标，按下像轻轻沉了一下；聚焦轮廓则告诉键盘用户当前会操作哪里。
要点一个按钮怎样让人知道能做什么？
- 1
文案说清点击后的结果
你在设置页放一个写着“保存修改”的按钮，用户就能预期点击后的结果。只写“确定”，他还得回头看上下文；如果页面上同时有几件事要确认，这种猜测就更容易出错。
- 2
状态反映操作是否可用
按钮不只有能点和不能点两种表现。比如提交表单后，按钮可以显示“提交中”并暂时阻止重复提交；失败后再恢复可操作状态。这样用户能判断请求是否已经发出。
- 3
用原生按钮承接操作
做网页时，让 AI Agent 用原生按钮元素实现点击操作，键盘操作和焦点行为就有了可靠基础。按钮放在表单里时，还要说清它是提交表单，还是只执行一次局部操作。
容易混淆的地方
按钮和链接最容易混淆：按钮触发操作，比如保存设置；链接带你去另一个页面或页面位置，比如打开帮助文档。两者都可能长得像一块可点击的文字，但不能只看外观来选。图标也不是按钮：它只是图形；如果图标负责触发操作，背后仍需要按钮，并给这个操作一个能被理解的名称。
什么时候用
适合用
- 在后台编辑商品后，用“保存修改”按钮触发保存，并在请求期间显示处理状态。
- 在聊天工具里，用“发送消息”按钮提交当前输入内容，让用户明确这是一次操作。
- 在文件管理页面，用“新建文件夹”按钮打开创建流程，而不是把它伪装成页面链接。
不适合用
- 只是带用户打开帮助中心文章时，用链接；这里没有要在当前界面执行的操作。
- 只是展示商品状态“已售罄”时，用文字或徽标；状态本身不需要可点击控件。
- 让用户在几个互斥选项中选一个时，用单选框等选择控件；普通按钮不适合单独承担选值。
练一练选一个答案，看看解释
你在做一个订单后台：用户点“查看配送说明”会打开说明页，点“确认发货”会提交发货操作。你会怎样实现？
让 AI 帮你做复制给 AI Agent 直接用
请在订单详情页把“确认发货”实现为按钮，点击后提交发货请求；请求期间显示“提交中”并阻止重复点击，成功或失败后给出结果反馈。“查看配送说明”只负责打开说明页，请用链接实现。