ZartUI Mobile 按钮规范

v1.1.0  |  6 种类型 · 4 档尺寸 · 全圆角 · 大/中 16px，小/微 14px

通用规则 Shared
圆角
border-radius: 999px
字号
大/中 16px，小/微小 14px
按钮类型 6 Types
主要按钮 Primary
页面主导操作（提交/保存/确认），每个视图仅一个
渐变 DB60→DB40 文字 #FFF
同级按钮 Secondary
与主按钮同层级但非主导（取消/返回）
填充 #FFF 描边 DB60 文字 DB60
次级按钮 Tertiary
弱化操作（更多/辅助功能），降级视觉权重
描边 G30 文字 #223355
危险按钮 Danger
删除/注销/不可逆操作
背景 #FF4433 文字 #FFF
警告按钮 Warning
需用户二次确认的操作
背景 #FFAA00 文字 #FFF
成功按钮 Success
完成/通过类正向操作
背景 #11C79B 文字 #FFF
按钮尺寸 4 Sizes
大 44pxLarge
中 36pxMedium
小 28pxSmall · 14px
微 24pxMini · 14px
类型速查表 Quick Ref
类型背景文字色描边场景
主要 Primary
渐变 DB60→DB40		 #FFFFFF 无 提交/保存
同级 Secondary
#FFFFFF		 #3388FF DB60 1px 取消/返回
次级 Tertiary
#FFFFFF		 #223355 G30 1px 辅助功能
危险 Danger
#FF4433		 #FFFFFF 无 删除/注销
警告 Warning
#FFAA00		 #FFFFFF 无 二次确认
成功 Success
#11C79B		 #FFFFFF 无 完成/通过
色值缩写参考 Color Keys
DB60
#3388FF
blue.60 · 主品牌色
DB40
#75A3FF
blue.40 · 渐变浅端
G30
#E9ECF2
neutral.G30 · 浅描边
G60
#223355
indigo.60 · 正文文字色
CSS 变量 Variables
/* 按钮全局变量 */
--btn-radius:     999px;
--btn-font-size:    16px;
--btn-font-size-sm: 14px;
--btn-height-lg:  44px;
--btn-height-md:  36px;
--btn-height-sm:  28px;
--btn-height-xs:  24px;
注意事项 Pitfalls
返回组件首页