按钮组件必须正确实现 disabled 状态、加载态、主题适配与键盘可访问性：React 中需受控 disabled 并先更新状态再发请求，Vue 中须响应式绑定 :disabled；loading 用独立 slot 或 SVG 图标配合固定尺寸防抖动；样式通过原子 class 和 CSS 变量控制；键盘需支持 Enter/Space 触发并保留 focus-visible 聚焦样式。
按钮组件必须支持 disabled 状态的响应式控制
用户点击后按钮要立刻禁用，防止重复提交，但很多人只在 DOM 上加 disabled 属性，却忘了同步更新组件内部状态和视觉反馈。React 中常见错误是只改 props 不触发重渲染，Vue 里则容易忽略 :disabled 绑定未响应式。
- React 场景下，确保
disabled是受控 prop，且点击回调中先设setDisabled(true)再发请求，避免异步间隙被再次点击 - Vue 中用
v-bind:disabled="isSubmitting"，别写成静态disabled；若用defineProps，需声明disabled类型为Boolean并默认false - CSS 必须覆盖
button:disabled和button[disabled]，因为某些框架（如 Svelte）不自动加属性，只靠绑定类名
加载态按钮需要独立 slot 或 loading 属性控制图标占位
单纯用文字 “提交中…” 不够，用户需要明确感知操作正在进行，且按钮尺寸不能跳变。直接替换 innerHTML 会导致布局抖动，尤其在 flex 容器里。
- 推荐结构：用
loading布尔 prop 控制是否显示<span class="btn-loading"></span>，配合 CSSdisplay: inline-flex+ 固定宽高 - 图标建议用 inline SVG 而非字体图标，避免加载延迟或字体未就绪时空白；SVG 的
width/height设为1em保持与文字等高 - 若支持插槽（如 Vue 的
#loading），务必设置display: flex容器并align-items: center，否则图标易偏移
按钮尺寸和主题必须通过 class 而非内联 style 控制
用 style="padding: 8px 16px" 写死尺寸会破坏设计系统一致性，也难以响应式适配。更麻烦的是，当父容器用 CSS 变量定制主题时，内联样式优先级过高，导致主题切换失效。
- 定义原子 class：如
btn--sm、btn--primary、btn--ghost，每个只负责一类职责 - 主题色用 CSS 自定义属性，例如
--btn-bg: var(--color-primary);，并在根元素或组件 scope 里动态修改 - 禁止在组件逻辑里拼接 class 字符串（如
class="btn " + size），改用clsx（React）或:class对象语法（Vue）保证可维护性
键盘交互必须支持 Enter/Space 触发，且 focus-visible 区分键盘聚焦
很多按钮在鼠标点击正常，但键盘用户按空格无反应，或聚焦边框样式和鼠标聚焦混在一起，影响可访问性。这不是“锦上添花”，而是 WCAG 2.1 必须项。
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown事件，仅对Enter和Space调用click()模拟，注意preventDefault()防止滚动 - CSS 中用
button:focus:not(:focus-visible) { outline: none; }保留键盘聚焦高亮，同时隐藏鼠标聚焦的 outline - 确保按钮有足够对比度（至少 4.5:1），禁用态用
opacity: 0.5+cursor: not-allowed，而非仅靠灰度
真正难的不是写出一个能点的按钮，而是让 disabled 状态不被绕过、loading 图标不挤开文字、主题切换时不闪屏、键盘用户和屏幕阅读器都能平等地触发它——这些细节一旦漏掉，组件就只是看起来像按钮而已。
