ZartUI Mobile 按钮规范 v2

按钮类型6 Types

主要按钮

主要 Primary

渐变 DB60→DB40 · 文字 #FFF · 主导操作

同级按钮

同级 Secondary

DB60 描边/文字 · 填充 #FFF · 取消/返回

次级按钮

次级 Tertiary

描边 G30 · 文字 G60 · 辅助功能

危险按钮

危险 Danger

背景 #FF4433 · 文字 #FFF · 删除/注销

警告按钮

警告 Warning

背景 #FFAA00 · 文字 #FFF · 二次确认

成功按钮

成功 Success

背景 #11C79B · 文字 #FFF · 完成/通过

按钮尺寸4 Sizes

大 44pxLarge

确认提交

中 36pxMedium

保存草稿取消

小 28pxSmall · 14px

编辑删除

微 24pxMini · 14px

查看

主要按钮 PrimaryDB

默认 — 渐变 DB60→DB40

加载中 — 左侧加载图标

按下 — 渐变 DB70→DB50

禁用 — 渐变 DB30→DB20 · 文字#FFF

危险按钮 DangerR

默认 — R60

加载中 — 左侧加载图标

按下 — R70

禁用 — R30

同级按钮 SecondaryDB

默认 — DB60描边 · DB10填充

加载中 — 左侧加载图标

按下 — 填充 DB10→DB20

禁用 — opacity:0.35

次级危险按钮 Secondary DangerR

默认 — R60描边/文字 · R10填充

加载中 — 左侧加载图标

按下 — 填充 R10→R20

禁用 — 描边/文字 R30

次级描边按钮 Secondary OutlineG

默认 — G10描边 · G60文字

加载中 — 左侧加载图标

按下 — 背景→G05

禁用 — 描边G05 · 文字G30

色值映射速查表

前缀	来源色板	色值参考
DB	蓝色 Blue	60=#3388FF 70=#2B72D9 50=#4D88FF 40=#75A3FF 20=#C2D8FF 10=#E8F1FF
R	红色 Red	60=#F26450 70=#D5493B 30=#FCBAAA 20=#FDD5CE 10=#FFECE8
G	深蓝 Indigo	60=#223355 10=#E8EDF5 05≈#F4F6FA 30=#9EADD5

CSS 变量

/* ── 色板 Token ── */
/* Blue */ --DB10:#E8F1FF; --DB20:#C2D8FF; --DB30:#9EBFFF; --DB40:#75A3FF; --DB50:#4D88FF; --DB60:#3388FF; --DB70:#2B72D9;
/* Red  */ --R10:#FFECE8; --R20:#FDD5CE; --R30:#FCBAAA; --R60:#F26450; --R70:#D5493B;
/* Indigo */ --G10:#E8EDF5; --G05:#F4F6FA; --G30:#9EADD5; --G60:#223355;
/* ── 按钮尺寸 ── */
--btn-width:348px; --btn-height-lg:44px; --btn-font:16px;

类型速查表Quick Ref

类型	背景	文字色	描边	场景
主要 Primary	渐变 DB60→DB40	#FFFFFF	无	提交/保存
同级 Secondary	#FFFFFF	DB60 #3388FF	DB60 1px	取消/返回
次级 Tertiary	#FFFFFF	G60 #223355	G30 1px	辅助功能
危险 Danger	#FF4433	#FFFFFF	无	删除/注销
警告 Warning	#FFAA00	#FFFFFF	无	二次确认
成功 Success	#11C79B	#FFFFFF	无	完成/通过

注意事项

类别	说明	正确做法
避坑	渐变方向错误	固定 90deg 从左到右，DB60→DB40 不可颠倒
避坑	尺寸和字号不匹配	大/中按钮 16px，小(28px)/微(24px)按钮 14px
避坑	禁用态未设白色文字	主要按钮禁用态渐变 DB30→DB20，文字保持 #FFF
避坑	次级按钮暗色画布看不清	次级 Outline 描边 G10 仅限浅色背景，深色背景需反色
避坑	次级按钮与禁用态混淆	次级文字 G60 + 描边 G30，禁用态整体 opacity:0.35