---
title: 按钮
slug: 按钮
category: 组件
figma_node_id: 1:7
figma_page_name: ＞按钮
aliases: [Button, btn, 按键, primary button, 主按钮, 次按钮, 危险按钮]
last_extracted: 2026-05-19
status: ok
---

# 按钮

> 用于行动 / 命令引导的核心控件。如流按钮按形态分主要、次要、组合、文字四类，按语义分通用与警示（红）两组，按平台分桌面端与移动端两套号型。文字内容应包含动词，且不超过 6 个中文字符。

## 类型与号型

### 按基础形态分类

| 类型 | 适用场景 |
|---|---|
| 主要按钮（Primary） | 用于行动 / 命令较强的引导性，每屏一个 |
| 次要按钮 1（Secondary 1） | 一般与主按钮组合使用；信息层级较弱 |
| 次要按钮 2（Secondary 2） | 单独使用，非强指令时的次要按钮（用在有色背景时反色） |
| 选择 / 组合按钮 | 与图标组合或多个按钮选择时使用 |
| 文字按钮 1 | 多个文字按钮同时出现时使用，需与 icon 组合 |
| 文字按钮 2 | 单个文字按钮使用，可不与 icon 组合 |
| 警示按钮（Danger） | 较强的警示作用（慎用） |
| 填充按钮（Fill / 灰底） | 与主要按钮组合时使用，信息层级介于次要与主要之间 |

### 按号型（移动端 / 1 倍屏）

| 号型 | 高度 | 应用场景 |
|---|---|---|
| 32px | 32 | 小尺寸表单内按钮、紧凑区域 |
| 36px | 36 | 一般操作按钮 |
| 40px | 40 | 表单提交主按钮、常规操作 |
| 46px | 46 | 重要 CTA、底部固定按钮 |

### 按号型（桌面端）

桌面端按钮设计说明区给出的号型：**32px / 28px / 24px** 三档；状态标注覆盖默认、按下、禁用，号型差异主要体现在高度与内边距。

## 尺寸规格

### 移动端按钮（数据来自 Figma 各 ComponentSet）

每个号型都同时提供：主要 / 次要 1 / 次要 2 / 警示 / 填充五种语义形态，每种形态再展开「默认 / loading / 禁用 / hover / down / icon+文字 / 选中」等状态。

- 文字按钮内边距按号型递进：32 → 36 → 40 → 46
- 圆角统一采用胶囊型或小圆角（依语义不同），具体值参见各 Component 实例
- 文字使用 PingFang SC Medium，常用字号：12 / 14 / 24（说明区标题用 24px）

### 桌面端按钮

- 主要按钮号型 24/28/32px 三档
- 同样覆盖默认 / 禁用 / hover / down 四种基础状态
- 选择 / 组合按钮额外提供「icon+文字」组合形态

## 状态

按钮的完整状态枚举（来自 Figma `Property 1=` 变体命名）：

| 状态 | 含义 |
|---|---|
| 默认（default） | 可点击的常态 |
| hover | 桌面端鼠标悬停态 |
| down | 鼠标按下 / 移动端 Touch 按下 |
| loading | 异步操作进行中，按钮禁用并显示加载指示 |
| 禁用（disabled） | 不可操作态，所有视觉降饱和 |
| 选中（selected） | 用于选择 / 组合按钮，标识当前激活项 |
| icon+文字 | 与图标组合的扩展形态（不算独立状态，是组合变体） |

## 颜色与 token

### 主要按钮（通用蓝）

| 状态 | 填充色 | 备注 |
|---|---|---|
| 默认 | `#3377FF` | 通用主按钮底色（注：本页使用的蓝色与品牌主色 `Brandblue60 #165DFF` 略有差异） |
| hover | `#5990FF` ≈ `Brandblue40` | 鼠标悬停加亮 |
| down | `#2E6BE5` | 按下加深 |
| 禁用 | `#3377FF` + 文字降透明度 | 底色不变，文字色与图标弱化 |

### 警示按钮（红）

| 状态 | 填充色 | 备注 |
|---|---|---|
| 默认 / loading / 禁用 | `#FF5040` | 警示语义色，对应 `Vermilion60` 区段 |
| down | `#E6483A` | 按下加深 |

### 填充 / 次要灰底按钮

| 状态 | 填充色 | 备注 |
|---|---|---|
| 默认 / loading / 禁用 | `#F2F4F7` = `C-Coolgray30` | 通用浅灰底 |
| 选中 | `rgba(51,119,255,0.12)` | 主色 12% 透明度叠底 |
| down | `#EAEDF2` | 按下加深 |

### 次要按钮 1（描边 / 透明底）

- 默认填充：空（无填充，仅描边或纯文字）
- 文字色：`#5C6373`（说明区文字 `fill_7R4H74`）

### 文字色

| 用途 | hex | 备注 |
|---|---|---|
| 说明区主文字 | `#11141A` | 24px Medium 标题 |
| 说明区正文 | `#17181A` | 14px Regular |
| 状态标签灰 | `#5C6373` | 12px Regular（默认/按下/禁用文字色） |
| 主按钮文字 | `#FFFFFF` | 默认白底反色 |

> 关联 token 详见 [色彩](../基础/色彩.md)。本页按钮采用 `#3377FF` 作为主色，与品牌主色锚点 `Brandblue60 #165DFF` 数值不同，疑似该页面色板与最新基础规范存在一定偏差，使用时应以最新 token 文档为准。

## 间距与排布

- 移动端画板宽度 1280px，整页高度 3308px
- 设计说明区主标题位于 `(160, 332)` 区域，字号 24px / 行高 24px
- 桌面端按钮组水平排布；每个号型自成一列（24 / 28 / 32px）

（按钮内文字与边的内边距、按钮之间的横向间距等具体 dp 值未在本页 globalVars 中以独立 token 形式给出。）

## 文案规则

> 按钮中文字建议不要超过 6 个中文字符，按钮中文字应包含动词。

- 优先使用动宾结构（如「确认」「立即开通」「保存草稿」）
- 主按钮文案应表达明确的下一步动作，避免「确定」「下一步」这类语义稀薄的词
- 警示按钮文案需直白且收敛（如「删除」「清空记录」），避免使用反讽

## 交互行为

- **主要按钮**：每个页面 / 卡片只出现一个主按钮，承担明确的 CTA
- **次要按钮 1**：与主按钮成对出现，承担「取消」「上一步」等次级操作
- **次要按钮 2**：用于无主按钮上下文中的单独次级动作，可独立使用
- **选择 / 组合按钮**：用于多项操作并列（如工具栏的「字体 / 字号 / 颜色」按钮组），支持选中态
- **文字按钮**：信息层级最弱，与图标组合或单独使用，常出现在卡片角落、列表 inline 操作
- **警示按钮**：用于不可逆 / 高风险操作（删除、解散、退出），通常配合二次确认弹窗
- **loading 态**：按钮变为不可点击，需在异步操作完成后切回原状态
- **down / hover 态**：分别为桌面端鼠标悬停反馈与按下反馈，色值在主色基础上分别加亮 / 加深一档

## 示例

![移动端按钮总览](../图片/组件/按钮/mobilean-niuoverview.png)
![桌面端按钮总览](../图片/组件/按钮/desktopan-niuoverview.png)
![移动端-主要按钮全状态](../图片/组件/按钮/mobile-zhu-yao-an-niu-quanstate.png)
![移动端-警示按钮全状态](../图片/组件/按钮/mobile-warn-btnquanstate.png)
![移动端-填充按钮全状态](../图片/组件/按钮/mobile-tian-chong-an-niu-quanstate.png)
![移动端-次要按钮全状态](../图片/组件/按钮/mobile-ci-yao-an-niu-quanstate.png)
![桌面端按钮-基础类型示意](../图片/组件/按钮/desktopan-niu-baselei-xingdemo.png)

## 设计考量 / 原文摘录

> 用于行动 / 命令较强的引导性。
> 与图标组合或者有多个按钮选择时使用。
> 较强的警示作用（慎用）。
> 单独使用，非强指令时的次要按钮（用在有色背景时反色）。
> 与主要按钮组合时使用（用在有色背景时反色）。

- **形态—语义对应**：主按钮 = 强引导；次要 1 = 与主按钮成对；次要 2 = 独立次级；组合 = 工具型；文字 = 最弱层级；警示 = 不可逆操作
- **每屏一个主按钮**：保证 CTA 的视觉唯一性，避免引导冲突
- **反色策略**：在有色背景上次要按钮反色显示，确保对比度

## 不推荐用法

- 同一区域出现两个主按钮（语义冲突）
- 警示按钮用于普通操作（如「下一步」「保存」）
- 按钮文案使用名词或长句（如「我已阅读并同意以上所有条款」）
- 文字按钮承担页面级 CTA（信息层级不够）
- 桌面端按钮直接复用移动端尺寸（号型体系不同：移动端 32/36/40/46，桌面端 24/28/32）

## 关联

- 色彩 token 见 [色彩](../基础/色彩.md)
- 字体规格见 [字体](../基础/字体.md)
- 与按钮形态相关的输入控件见 [输入框](输入框.md)
- 删除 / 高危操作的二次确认见 [弹窗](弹窗.md)
- 加载态指示器见 [加载](加载.md)
