BUTTON · 按钮组件

一个按钮，五种形态
把交互细节做到位

按钮是界面中使用频率最高的交互元素。本讲从按钮的类型体系、状态管理、尺寸规范到无障碍与代码实现，带你设计一套可复用、可扩展的企业级按钮组件——这也是判断一个 UI 团队专业度的第一道题。

返回组件库下一讲：表单

button.vue

type: 'primary' | 'ghost'
    | 'dashed' | 'text' | 'link'
size: 'sm' | 'md' | 'lg'
state: disabled / loading / danger
icon: 前置 / 后置 / 纯图标

PAIN POINTS

按钮没做好，用户操作就"断"了

😱

误点"删除"，数据没了

危险操作没有二次确认、没有危险色警示，用户手滑一下，重要数据灰飞烟灭。

🔁

重复提交，订单下两单

加载态没做好，用户狂点提交按钮，后端收到一堆重复请求，引发支付/订单事故。

♿

键盘用户根本没法操作

没有焦点样式、不支持键盘触发，只靠鼠标才能用——无障碍的坑被忽略。

TYPES

五种按钮形态解析

主按钮 Primary

页面中最关键的操作，视觉最突出，一页建议只有一个主按钮。

次按钮 Default

与主按钮并列的辅助操作，降低视觉层级，避免争抢焦点。

虚线按钮 Dashed

常用于"新增、上传"等引导性操作，暗示可扩展。

文字按钮 Text

低打扰的操作入口，用于详情、查看等非关键动作。

危险按钮 Danger

高风险操作使用红色警示，通常配合二次确认。

加载状态 Loading

异步操作时展示加载态，防止重复点击。

5 种按钮形态体系

6 种交互状态覆盖

3 档尺寸规范

44px最小触达区域

STATE MATRIX

按钮状态矩阵一览

组件设计时把状态一次定义齐全，使用时才不会到处补丁。对照下表逐项检查你的按钮组件。

状态	触发场景	视觉要点	交互要求
默认 Default	初始展示	主色/描边/文字三种基线	可点击，光标 pointer
悬停 Hover	鼠标移入	加深主色 / 上浮阴影	反馈及时，必做
按下 Active	鼠标按下	轻微下压、颜色加深	与悬停可区分
聚焦 Focus	键盘 Tab 到	可见焦点环（outline）	无障碍必需
禁用 Disabled	条件不满足	置灰、降对比度	阻断点击并给原因提示
加载 Loading	异步请求中	图标旋转 + 文案占位	防重复提交，关键

RULES

按钮设计的五大准则

一页一主

每个页面/弹窗只有一个主按钮，其余一律降级为次按钮或文字按钮，避免用户决策混乱。

动作即名词

按钮文案用"动词 + 名词"表达清楚动作结果（如"提交订单"而非"确认"），降低理解成本。

可点区域

按钮最小点击区域建议 44×44px（移动端），保证触达友好；桌面端高度一般 32/40/48px 三档。

状态齐全

每个按钮必须覆盖默认、悬停、按下、禁用、加载、聚焦六种状态，避免交互断层。

危险二次确认

删除、清空等不可逆操作必须使用危险色并配合二次确认，防止误操作造成损失。

细节决定体验按钮是交互的"最小完整单元"

ACCESSIBILITY

别忘了无障碍与可访问性

优秀的按钮组件要照顾所有用户：键盘操作、读屏软件、对比度、焦点样式。这些细节常被忽略，却是企业级组件与普通 Demo 的分水岭。

支持键盘 Enter / 空格触发
提供可见的 focus 焦点环
纯图标按钮必须带 aria-label
文字与背景对比度不低于 4.5:1

返回组件库总览

USE CASES

按钮规范用在哪

🛒

电商下单

"立即购买/加入购物车"是转化核心，按钮文案与防重复设计直接影响成交。

📝

表单提交

加载态 + 防重复是表单按钮的必备能力，避免重复提交事故。

🖥️

后台系统

大量"编辑/删除/导出"操作，危险色与二次确认保护企业数据安全。

📱

移动端应用

触控友好、手指可点区域、单手可及，按钮是移动体验的关键。

整套组件想做成一站式网站？

从按钮到整站 UI，编程新知提供企业官网与电商网站一站式建站服务。

建站方案下一讲：表单

FAQ

按钮组件高频问答

按钮用于"动作"（提交、删除、保存），链接用于"跳转"（查看详情、打开页面）。用错会让用户对行为预期产生偏差。

通过 CSS 变量定义主色、圆角、阴影等设计令牌，换肤时只改一层变量即可全局生效，无需改动每个按钮。

点击后立即置为 loading 并禁用，同时在后端做幂等处理（请求唯一 ID），双保险防止重复提交订单或支付。

纯图标按钮必须添加 aria-label 或 title 描述动作含义；有文字时用 aria-hidden 隐藏装饰性图标，避免读屏重复朗读。

降低对比度 + 置灰，同时保证仍可读；禁用原因最好用 tooltip 说明（如"请先填写手机号"），避免用户困惑为什么点不了。

不建议。两个主按钮会分散用户注意力、增加决策负担。真有两个重要操作时，重新审视业务，把次要的降级为次按钮。

用"动词 + 名词"说清结果（提交订单、保存草稿），避免歧义词（确认、好的）；同一页面动词体系保持统一，比如都用"提交"就不要混用"发送"。

用设计令牌定义 sm/md/lg 三档（高度、字号、内边距），移动端可整体放大一档保证触达；不要每处手写尺寸，改起来会失控。

一个按钮，五种形态把交互细节做到位