ZartUI 按钮规范预览

一、全圆角按钮(Pill)

border-radius: 100px  |  padding: 0 16px  |  高度 32px / 24px

1-1 主按钮(Primary)

Normal
Hover
Click
Disabled
Small (24px)

1-2 次要按钮(Secondary)

Normal
Hover
Click
Disabled
Small (24px)

1-3 危险状态(Danger)

基于次要按钮,Normal 样式一致,hover/click 变为危险红

Normal
Hover
Click
Small (24px)

二、矩形按钮(Rect)

border-radius: 4px  |  padding: 0 16px  |  高度 32px / 24px

2-1 面状按钮(Solid)

用于提交、保存、确定等主要提交类操作

Normal
Hover
Click
Disabled
Small (24px)

2-2 线状按钮(Outline)

用于取消、重置、重新编辑等次要操作

Normal
Hover
Click
Disabled
Small (24px)

三、使用场景对照

场景 按钮类型 示例
新增、创建、添加 全圆角 · 主按钮
导入、导出、编辑、设置 全圆角 · 次要按钮  
删除、禁用等不可逆操作 全圆角 · 危险状态
表单提交、保存、确定 矩形 · 面状按钮
取消、重置、重新编辑 矩形 · 线状按钮

四、颜色 Token 速查

类型状态背景描边文字/图标
全圆角 · 主按钮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
返回组件首页