按钮Button

你可能会说

帮我加个按钮，点了就能把内容存下来。

按钮是让用户在当前页面执行保存、提交、删除等操作的可点击控件用户提交注册表单或保存设置时会点击按钮。链接负责前往别处；同一操作区应突出一个主要动作，其余动作降低层级。

也常被叫作操作按钮

登录账号

忘记密码注册新账号

选择题选择一个你认为最合适的答案

设置页里有“保存”“取消修改”“删除账号”和“重设密码”。哪些应该做成按钮？

保存、取消修改、删除用按钮；重设密码用链接保存和删除用按钮；取消修改和重设密码都用链接四项都做成相同样式的按钮，并排放在一起

请整理账号设置页：保存资料、放弃本次修改和删除账号使用各自明确的按钮，删除前确认；“重设密码”保留为链接。不要改布局。分别触发保存、放弃修改和删除确认，确认保存中不能重复提交。

容易混淆？这样区分

按钮 Button 点一下就执行一个动作；分段控件 Segmented 表示一组选项中当前选中了哪一个，通常用来切换视图或模式。

组成结构 · Anatomy

整块可点击区域，有主要 / 次要 / 危险等类型

可选，用来强化动作含义；单独做图标按钮时要提供读屏可识别的名称，含义不直观时再配 Tooltip

动词开头，说清点完会发生什么

常见变体 · Variants

主要按钮Primary

在同一操作区域留给最重要的动作

次要按钮Outline

取消、返回这类退一步的操作用它

文字按钮Text

最轻量的操作，比如展开详情、收起

危险按钮Danger

删除、清空等不可挽回的操作才用

加载与禁用Loading & Disabled

提交中或条件未满足时，防止重复点击

典型使用场景

登录表单提交

欢迎回来

删除确认弹窗

确认删除这个项目？

删除后无法恢复，请谨慎操作。

推荐工具

点选按钮、文字或卡片，写下“圆角小一点”，再把准确位置和页面信息一起复制给 AI。