Button 按钮
用户通过点击来采取行动和做出选择
构成
Button
1
3
2
1: 容器
必有，主要为蓝色、灰色、线框、绿色、红色 5种按钮
2: icon
可选，支持在文字前方配置icon内容
3: 文字
必有，首字母大写
1: 容器
可选，分为有容器和无容器
2: 前缀 icon
可选，支持在文字前方配置icon内容，与后缀 icon互斥
3: 文字
必有，首字母大写
4: 后缀 icon
可选，支持在文字前方配置icon内容，与前缀 icon互斥
Button
Button
1
2
3
4
1: 容器
必有，上下左右padding可选24/16
2: Button
可选，支持任意按钮配置，一般为1+2 / 2+3级搭配
2
1
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级
使用场景
BTN
BTN
Button
Button
Button
Button
Button
Secondary
Primary
类型说明：
Standard Button 标准按钮：
1级按钮：也叫主按钮，是强调等级最高，也是操作优先级最高，且最吸引用户关注引导用户行为发生的按钮；
2级按钮：强调程度次于主按钮，可独立使用，一般与主按钮或3级按钮搭配；
3级按钮：强调等级最弱，通常与2级按钮搭配使用，不与1级按钮搭配；
高亮按钮：一般为涨跌、删除、风险操作等多功能按钮
Text Button 文字按钮：主要分为大热区和小热区类型，通常出现在表格操作栏、标题和字段旁等非强调区
Button Group 按钮组：一般为1级+2级，2级+3级的组合，分为居中均分以及右对齐两种
*为满足[每次只让用户专注做一件事]的能力，DS建议：
1个页面内，仅放置1-2个主按钮，作为核心转化入口，页面内其他场景按钮搭配建议使用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
Button
lg-48
xl-56
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
56px
40px
32px
28px
24px
Secondary
Primary
Secondary
Primary
Primary
Secondary
Tertiary
Secondary
Tertiary
Secondary
Secondary
Tertiary
标注说明：
Standard Button 标准按钮：共5种按钮高度
Text Button 文字按钮：共3种按钮高度，分别对应16、14、12medium按钮文字的大小
Button Group 按钮组：按钮组当中，主按钮始终在右 / 上
文案超长
按钮文案在展示宽度下的超长处理：优先精简文案，若超长，则先缩小字号，缩小幅度最大-2（如16最小缩到14，14最小缩到12），若仍超长则在固定高度内折行
Secondary
DefaultDefau…
Secondary
DefaultDefau…
Secondary
DefaultDefault…
Secondary
DefaultDefault…
Secondary
DefaultDefaultDefaultDefault
DefaultDefau…
DefaultDefau…
DefaultDefau…
假设文字默认16
先动态缩小到15
仍超长动态缩小到14
仍超长动态缩小到14
折行
假设文字默认16
动态缩小到15
···
动态缩小到12
精简文案
精简文案
≥2个Button 时：
单个 Button 时：
若缩小到最小字号仍然超长
RTL
View More
LTR
بیشتر ببینید
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
错误
文字按钮在使用时注意热区，大热区按钮一般和标准按钮搭配使用，一般和列表、模块搭配使用时，均使用小热区文字按钮
按钮
操作按钮
控件
按钮组件
点击按钮