border-radius: 100px | padding: 0 16px | 高度 32px / 24px
基于次要按钮,Normal 样式一致,hover/click 变为危险红
border-radius: 4px | padding: 0 16px | 高度 32px / 24px
用于提交、保存、确定等主要提交类操作
用于取消、重置、重新编辑等次要操作
| 场景 | 按钮类型 | 示例 |
|---|---|---|
| 新增、创建、添加 | 全圆角 · 主按钮 | |
| 导入、导出、编辑、设置 | 全圆角 · 次要按钮 | |
| 删除、禁用等不可逆操作 | 全圆角 · 危险状态 | |
| 表单提交、保存、确定 | 矩形 · 面状按钮 | |
| 取消、重置、重新编辑 | 矩形 · 线状按钮 |
| 类型 | 状态 | 背景 | 描边 | 文字/图标 |
|---|---|---|---|---|
| 全圆角 · 主按钮 | Normal | #FFFFFF | #DDE1EB | #3388FF |
| Hover | #F0F9FF | #3388FF | #3388FF | |
| Click | #D6EDFF | #3388FF | #3388FF | |
| Disabled | #FFFFFF | #F5F7FA | #ADD8FF | |
| 全圆角 · 次要按钮 | Normal | #FFFFFF | #DDE1EB | #223355 |
| Hover | #F0F9FF | #3388FF | #3388FF | |
| Click | #D6EDFF | #3388FF | #3388FF | |
| Disabled | #FFFFFF | #F5F7FA | #CED4E0 | |
| 全圆角 · 危险状态 | Normal | #FFFFFF | #DDE1EB | #223355 |
| Hover | #FFF4F0 | #FF4433 | #FF4433 | |
| Click | #FFDFD6 | #FF4433 | #FF4433 | |
| 矩形 · 面状按钮 | Normal | #3388FF | — | #FFFFFF |
| Hover | #5CA5FF | — | #FFFFFF | |
| Click | #2167D9 | — | #FFFFFF | |
| Disabled | #ADD8FF | — | #FFFFFF | |
| 矩形 · 线状按钮 | Normal | #FFFFFF | #DDE1EB | #223355 |
| Hover | #F0F9FF | #3388FF | #3388FF | |
| Click | #D6EDFF | #3388FF | #3388FF | |
| Disabled | #FFFFFF | #F5F7FA | #ADD8FF |