开始

App 组件

动作面板

徽标

底部弹窗

按钮

多选框

币对单元

分割线

帮助提示

输入框

弹窗

导航栏

单选框

搜索栏

选择器

滑杆

底部提示

开关

标签栏

标签

轻提示

文字提示

Button 按钮

用户通过点击来采取行动和做出选择

figma 组件

构成

Button

1

3

2

1: 容器

必有，默认5种颜色，支持业务自定义

2: icon

可选，支持在文字前方配置icon内容，支持业务自定义

3: 文字

必有，首字母大写，支持业务自定义

1: 容器

可选，分为有容器和无容器

2: 前缀 icon

可选，与后缀 icon互斥，支持业务自定义

3: 文字

必有，首字母大写，支持业务自定义

4: 后缀 icon

可选，与前缀 icon互斥，支持业务自定义

1: 容器

必有，支持业务自定义

2: Button

可选，一般为1+2 / 2+3级搭配，支持业务自定义配置按钮

Button

Button

1

2

1

2

3

4

Secondary

Primary

变体/类型

Standard Button 标准按钮：

Button

Button

Button

Button

Button

1级按钮

2级按钮

3级按钮

高亮按钮

Text Button 文字按钮：

Button

Button

Button

Button

大热区

小热区

大热区

小热区

Button Group 按钮组：

Secondary

Primary

Tertiary

Secondary

1级+2级

2级+3级

使用场景

Button

Button

Button

Button

Button

Button

类型说明：

Standard Button 标准按钮：

1级按钮：也叫主按钮，是强调等级最高，也是操作优先级最高，且最吸引用户关注引导用户行为发生的按钮；

2级按钮：强调程度次于主按钮，可独立使用，一般与主按钮或3级按钮搭配；

3级按钮：强调等级最弱，通常与2级按钮搭配使用，不与1级按钮搭配；

高亮按钮：一般为涨跌、删除、风险操作等多功能按钮

Text Button 文字按钮：主要分为大热区和小热区类型，通常出现在表格操作栏、标题和字段旁等非强调区

Button Group 按钮组：一般为1级+2级，2级+3级的组合

*为满足[每次只让用户专注做一件事]的能力，DS建议：

单个页面场景内，仅放置1个主按钮，作为核心转化入口，页面内其他场景按钮搭配建议使用2级+3级的组合

若页面内无核心转化入口，入口的等级相差不大，可统一考虑放置2级按钮，使用2级+3级的组合

表单中的按钮状态

Primary

表单未填写
Primary 按钮设置成半高亮

设置 50% 不透明度

Primary

表单未填写，点击按钮

交互反馈： Input 和 CheckBox 边框变红

App 端可增加震动

Primary

表单填写完成

用 Primary 按钮的默认状态

交互反馈：点击提交表单

标注

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

lg-48

lg-16

大热区

Text Button

Standard Button

Button Group

小热区

md-40

md-14

sm-32

sm-12

xs-28

xxs-24

强（默认）：1级+2级

弱：2级+3级

48px

40px

32px

28px

24px

Secondary

Primary

Primary

Secondary

Tertiary

Secondary

Secondary

Tertiary

标注说明：

Standard Button 标准按钮：共5种按钮高度

Text Button 文字按钮：共3种按钮高度，分别对应16、14、12medium按钮文字的大小

Button Group 按钮组：按钮组当中，主按钮始终在右 / 上

多语言适配

Default Button

Default Button

Default Button

Default Button Button…

假设文字默认16

动态缩小：

改变布局：

动态缩小到15

动态缩小到14

······

动态缩小到10仍超长

精简文案

ВторичныйSeco…

ВторичныйSecon…

ВторичныйSeconLnВторичный

ВторичныйSeconLnВторичный

超长说明：

优先精简文案

动态缩小，字号最小10px

改变布局，上下排列

极端情况，如德语折行展示

动态宽度，按钮最小宽度80px

RTL

بیشتر ببینید

LTR

View More

RTL

用法

Secondary

Primary

Tertiary

Secondary

正确

Tertiary

Primary

错误

未来需要避免1+3级按钮的使用，大部分场景仍然为1+2 或 2+3级的搭配

Button

Button

Button

正确

Button

Button

Button

错误

同一按钮组别内，不可放置不同类型的辅助按钮

Primary Button

Secondary Button

正确

Primary Button

Secondary Button

错误

文案不可直接截断，或超出按钮规范的padding

Cancel

OK

正确

Cancel

OK

错误

按钮最小宽度建议80px，最大宽度为屏幕宽度减页面左右padding

Title

Primary Button

正确

Title

Primary Button

错误

文字按钮在使用时注意热区，大热区按钮一般和标准按钮搭配使用，一般和列表、模块搭配使用时，均使用小热区文字按钮

DESIGN

中文