一个界面里按钮必须有主次：主操作（Primary）、次操作（Secondary）、危险操作（Danger）、文本操作（Text）。层级清晰，用户才不会点错。
很多新手把所有按钮都做成一个样式，结果页面“全是重点等于没有重点”。层级设计是按钮组件的灵魂。
黄金法则：一屏内主操作按钮不超过 1 个，次操作不超过 3 个。
一个成熟的按钮组件应该覆盖这些能力。
xs/sm/md/lg 四档，配合表单与页面的空间节奏。
主色、次色、成功、危险、警告、信息，语义化表达。
既可以是 button 也可以是 a 标签，语义正确。
提交中的 loading 态，防止重复提交。
禁用要有明确的视觉区分与语义说明。
纯图标与图标+文字的两种形态。
从选型到上线，把按钮做对。
梳理页面主流程，明确哪个是主按钮，哪些是辅助。
按设计规范选择尺寸与颜色语义，全局统一。
补全 hover、active、focus、loading、disabled 全状态。
重点验证提交防抖、键盘可达性与无障碍读屏。
每个状态都要有明确的设计表达。
| 状态 | 触发 | 视觉建议 |
|---|---|---|
| 默认 | 页面初始 | 主色实底/次色描边 |
| 悬停 | 鼠标移入 | 亮度/阴影变化 |
| 按下 | 点击时 | 下沉/颜色加深 |
| 聚焦 | 键盘 Tab | 焦点环清晰可见 |
| 加载 | 提交中 | 转圈 + 禁用点击 |
| 禁用 | 条件不满足 | 降低对比度 + 不可点 |
大概率缺少防重复提交。提交时置为 loading 态并禁用，直到接口返回。这是最常被忽视的细节。
纯图标按钮必须加 aria-label 或隐藏文本，否则读屏用户无法理解用途。
遵循设计令牌：主按钮用品牌主色，次按钮用描边/浅色底，避免两个同权重按钮并排。
建议最小触控高度 44px，避免误触。文字按钮也要保证点击区域。
