尺寸
| 类型 | 图标大小 | 字号 | 按钮高度 | 圆角 | 示例 | 说明 |
|---|---|---|---|---|---|---|
| 有图标 | 14px | 14px | 32px | 2px |  |
2字按钮宽度为72px |
 |
3-6字：按钮宽度由文字长度决定，保持左右内边距为8px； 字数尽量≤6； 利用css的min-width的属性来写 |
|||||
| 无图标 | -- | 14px | 32px | 2px |  |
2-4字：按钮宽度为72px |
 |
5-6字:按钮宽度由文字长度决定，保持左右内边距为8px； 字数尽量≤6； | |||||
| 圆形图标 | -- | 16px | 32px |  |
特殊情况使用圆形按钮 |
| 类型 | 图标大小 | 字号 | 按钮高度 | 圆角 | 示例 | 说明 |
|---|---|---|---|---|---|---|
| 有图标 | 14px | 14px | 24px | 2px |  |
2字按钮宽度为72px |
 |
3-6字：按钮宽度由文字长度决定，保持左右内边距为8px, 按钮文字尽量≤6个字 利用css的min-width的属性来写 |
|||||
| 无图标 | -- | 14px | 24px | 2px |  |
2-4字：按钮宽度为72px |
 |
5-6字：按钮宽度由文字长度决定，保持左右内边距为8px; 字数尽量≤6 |
|||||
| 圆形图标 | -- | 14px | 24px |  |
特殊情况使用圆形按钮 |
| 类型 | 图标大小 | 字号 | 按钮高度 | 圆角 | 示例 | 说明 |
|---|---|---|---|---|---|---|
| 有图标 | 16px | 16px | 40px | 2px |  |
2字按钮宽度为88px |
 |
3-6字：按钮宽度由文字长度决定，保持左右内边距为8px； 按钮文字尽量≤6个字 利用css的min-width的属性来写 |
|||||
| 无图标 | -- | 16px | 40px | 2px |  |
2-4字：按钮宽度为88px |
 |
5-6字：按钮宽度由文字长度决定，保持左右内边距为8px； 字数尽量≤6 |
|||||
| 圆形图标 | -- | 16px | 40px |  |
特殊情况使用圆形按钮 |
颜色/交互
按钮类型(5类) |
||||||||
|---|---|---|---|---|---|---|---|---|
|
默认按钮
|
幽灵按钮
|
线框按钮
|
虚线按钮
|
文字按钮
|
||||
默认按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 背景颜色 | |
|
默认
|
#FFFFFF | #1890FF | |
|
悬停
|
#FFFFFF | #1165B2 | |
|
默认
|
#FFFFFF | #EF5757 | |
|
悬停
|
#FFFFFF | #A73D3D | |
|
默认
|
#FFFFFF | #F68330 | |
|
悬停
|
#FFFFFF | #AC5C22 | |
|
默认
|
#FFFFFF | #60B971 | |
|
悬停
|
#FFFFFF | #43814F | |
|
默认
|
#FFFFFF | #05B1AC | |
|
悬停
|
#FFFFFF | #047C78 | |
|
默认
|
#FFFFFF | #533FB1 | |
|
悬停
|
#FFFFFF | #3A2C7C |
幽灵按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 背景颜色 | 描边颜色 |
|
默认
|
#1890FF | rgba(24, 144, 255, .1) | rgba(24, 144, 255, .4) |
|
悬停
|
#1890FF | rgba(24, 144, 255, .25) | rgba(24, 144, 255, .4) |
|
默认
|
#EF5757 | rgba(239, 87, 87, .1) | rgba(239, 87, 87, .4) |
|
悬停
|
#EF5757 | rgba(239, 87, 87, .25) | rgba(239, 87, 87, .4) |
|
默认
|
#F68330 | rgba(246, 131, 48, .1) | rgba(246, 131, 48, .4) |
|
悬停
|
#F68330 | rgba(246, 131, 48, .25) | rgba(246, 131, 48, .4) |
|
默认
|
#60B971 | rgba(96, 185, 113, .1) | rgba(96, 185, 113, .4) |
|
悬停
|
#60B971 | rgba(96, 185, 113, .25) | rgba(96, 185, 113, .4) |
|
默认
|
#05B1AC | rgba(5, 177, 172, .1) | rgba(5, 177, 172, .4) |
|
悬停
|
#05B1AC | rgba(5, 177, 172, .25) | rgba(5, 177, 172, .4) |
|
默认
|
#533FB1 | rgba(83, 63, 177, .1) | rgba(83, 63, 177, .4) |
|
悬停
|
#533FB1 | rgba(83, 63, 177, .25) | rgba(83, 63, 177, .4) |
线框按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 描边颜色 | |
|
默认
|
#1890FF | #1890FF | |
|
悬停
|
#1165B2 | #1165B2 | |
|
默认
|
#EF5757 | #EF5757 | |
|
悬停
|
#A73D3D | #A73D3D | |
|
默认
|
#F68330 | #F68330 | |
|
悬停
|
#AC5C22 | #AC5C22 | |
|
默认
|
#60B971 | #60B971 | |
|
悬停
|
#43814F | #43814F | |
|
默认
|
#05B1AC | #05B1AC | |
|
悬停
|
#047C78 | #047C78 | |
|
默认
|
#533FB1 | #533FB1 | |
|
悬停
|
#3A2C7C | #3A2C7C |
虚线按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 描边颜色 | |
|
默认
|
#1890FF | #1890FF | |
|
悬停
|
#1165B2 | #1165B2 | |
|
默认
|
#EF5757 | #EF5757 | |
|
悬停
|
#A73D3D | #A73D3D | |
|
默认
|
#F68330 | #F68330 | |
|
悬停
|
#AC5C22 | #AC5C22 | |
|
默认
|
#60B971 | #60B971 | |
|
悬停
|
#43814F | #43814F | |
|
默认
|
#05B1AC | #05B1AC | |
|
悬停
|
#047C78 | #047C78 | |
|
默认
|
#533FB1 | #533FB1 | |
|
悬停
|
#3A2C7C | #3A2C7C |
文本按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 描边颜色 | |
|
文本按钮默认
|
#1890FF | #1890FF | |
|
文本按钮悬停
|
#1165B2 | #1165B2 | |
|
文本按钮默认
|
#EF5757 | #EF5757 | |
|
文本按钮悬停
|
#A73D3D | #A73D3D | |
|
文本按钮默认
|
#F68330 | #F68330 | |
|
文本按钮悬停
|
#AC5C22 | #AC5C22 | |
|
文本按钮默认
|
#60B971 | #60B971 | |
|
文本按钮悬停
|
#43814F | #43814F | |
|
文本按钮默认
|
#05B1AC | #05B1AC | |
|
文本按钮悬停
|
#047C78 | #047C78 | |
|
文本按钮默认
|
#533FB1 | #533FB1 | |
|
文本按钮悬停
|
#3A2C7C | #3A2C7C |
其他按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 背景颜色 | 描边颜色 |
|
关闭
|
#1F1F1F | #EFF1F5 | #C2C4CC |
|
取消
|
|||
|
返回
|
|||
|
重置
|
#1F1F1F | #FFFFFF | #C2C4CC |
禁用按钮 |
|||
|---|---|---|---|
| 示例 | 文字颜色 | 背景颜色 | 描边颜色 |
|
默认
|
#C2C4CC | #EFF1F5 | #E1E2E5 |
搭配
| 示例 | 说明 | |
|---|---|---|
|
保存
|
取消
|
用于新增和修改 |
|
确定
|
取消
|
用于二次确认 |
|
提交
|
取消
|
用于审批流程处理 |
|
查询
|
关闭
|
用于高级查询的弹窗 |