Button
按钮
WebMobileDesktop上手难度: 容易
界面上最基础的可点击元素——用户一点，就会发生一件事。
Live Demo
真的可以点试试禁用态：
你刚才看到的这个：登录页的「登录」、设置页的「保存」、对话框底部的「取消 / 确定」——这些触发具体动作的元素都是 Button。
它到底是什么
Button 是所有操作的起点。它本身没有特殊的视觉身份：可以有各种颜色和尺寸，但它永远是那个「按下去会触发某个动作」的东西。
按钮button普通按钮push buttonbtn
Anatomy · 它由什么组成
Container容器
最小热区 44×44px，圆角 8px
Label文字
动词开头，说明结果
Leading Icon前置图标
可选，仅在提升识别度时加
Loading State加载态
禁用点击并显示 spinner
Disabled State禁用态
降低对比但仍可读
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 触发一个明确的动作（提交、删除、保存） | 用 |
| 动作是当前页面的下一步 | 用 |
| 需要区分主次：Primary + Secondary | 用 |
| 只是导航到另一个页面且没有语义 | 视情况 |
| 一个页面里超过 3 个同权重主按钮 | 不用 |
在页面顶部放一排文字链却都长得像按钮，会让主次消失。
按钮文案用「确定」会让用户不安——写「删除照片」比「确定」友好得多。
Similar Patterns
别搞混一句话区分：界面上最基础的可点击元素——用户一点，就会发生一件事。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在编辑页底部加一组按钮：左侧次要按钮「取消」，右侧主按钮「保存」。保存中显示 loading 并禁用。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个按钮。
改成这样说
加一组按钮：主按钮「保存照片」（深色实心）和次按钮「取消」（白底描边），主按钮点击后显示 loading 并禁用。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。