Button Component · Autocava Design System

🎯 何时用哪种 Button

Size 44（H5 / 移动端）：所有移动端 CTA
Size 48（PC / 桌面端）：所有桌面端 CTA，**禁止**移动端混用
Yellow 主色：品牌主行动 CTA（购买 / 订阅 / 立即联系）
Blue 信任：金融 / 信用 / 安全相关（申请贷款 / 实名认证）
Grey 中性：次要操作（取消 / 返回 / 次要按钮）

Size	Color	Status	背景色	文字色	字号 / 字重	圆角
44 H5	blue	default	#0056FA	#FFFFFF	14 / 500	8px
		press	#004EE4	#FFFFFF	14 / 500	8px
		disable	#F1F1F1	#999999	14 / 500	8px
		disable-2	#0056FA +opacity 0.5	#FFFFFF	14 / 500	8px
	grey	default	#F1F1F1	#222222	14 / 500	8px
		press	#DDDDDD	#222222	14 / 500	8px
		disable	#F1F1F1	#999999	14 / 500	8px
		（grey 没有 disable-2 变体）
	yellow	default	#FFCF20	#222222	14 / 500	8px
		press	#E8BC1D	#222222	14 / 500	8px
		disable	#F1F1F1	#999999	14 / 500	8px
		disable-2	#FFCF20 +opacity 0.5	#222222	14 / 500	8px
48 PC	blue	default	#0056FA	#FFFFFF	16 / 700	8px
		press	#004EE4	#FFFFFF	16 / 700	8px
		disable	#F1F1F1	#999999	16 / 700	8px
		disable-2	#0056FA +opacity 0.5	#FFFFFF	16 / 700	8px
	grey	default	#F1F1F1	#222222	16 / 700	8px
		press	#DDDDDD	#222222	16 / 700	8px
		disable	#F1F1F1	#999999	16 / 700	8px
		（grey 没有 disable-2 变体）
	yellow	default	#FFCF20	#222222	16 / 700	8px
		press	#E8BC1D	#222222	16 / 700	8px
		disable	#F1F1F1	#999999	16 / 700	8px
		disable-2	#FFCF20 +opacity 0.5	#222222	16 / 700	8px

📐 Spec Details

Height · Size 44 (H5)

44px

Height · Size 48 (PC)

48px

Border Radius

8px（所有变体）

Font Size · H5

14px / 500

Font Size · PC

16px / 700

Font Family

Roboto

Padding H · H5

0 16px

Padding H · PC

0 24px

🎨 对应 Design Tokens

变体	用 Token
Yellow default	`Button-Yellow/button-500-默认` (#FFCF20) + `Text/color-900-重要` (#222222)
Yellow press	`Button-Yellow/button-600-按压` (#E8BC1D) + `Text/color-900-重要` (#222222)
Blue default	`Blue/blue-500` (#0056FA) + `#FFFFFF`
Blue press	`Blue/blue-600` (#004EE4) + `#FFFFFF`
Grey default	`Grey/grey-100` (#F1F1F1) + `Text/color-900-重要` (#222222)
Grey press	`Grey/grey-200` (#DDDDDD) + `Text/color-900-重要` (#222222)
Disable (所有颜色)	`Grey/grey-100` (#F1F1F1) + `Text/color-400-提示` (#999999)
Disable-2 (Yellow/Blue)	保持 default 色 + `opacity: 0.5`

🚦 何时用哪种 Button

场景	推荐配置
购买 / 立即联系 / 订阅主 CTA	Yellow · Size 按设备
申请贷款 / 信用评估 / 实名认证	Blue · Size 按设备
取消 / 返回 / 次要操作	Grey · Size 按设备
页面主行动（移动端）	Yellow Size 44 + width: 100%
页面主行动（PC）	Yellow Size 48 + width: auto
悬浮底部固定 CTA（移动端）	Yellow Size 44 + width: calc(100% - 32px)

⚠️ 注意事项

✅ 所有按钮颜色 / 字号 / 圆角 必须用 token，禁止硬编码 hex
✅ Disable 用浅灰底 + 灰字（#F1F1F1 + #999999），保持可识别但不可点
✅ Disable-2 用品牌色 + opacity 0.5（区别于 disable，用于"已选 / 不可重复"等场景）
❌ 禁止用 Yellow 按钮做金融 / 信用相关（金融场景必须用 Blue）
❌ 禁止移动端用 Size 48（间距太大）或 PC 端用 Size 44（视觉太弱）
❌ 禁止添加 box-shadow / 渐变 / outline（本组件设计就是纯静态）

🧩 Button Group · 按钮组 / 单选

多个按钮组合使用：横向并排（工具栏）或互斥单选（套餐选择）。从 Figma 「按钮组」「按钮单选」共 63 次实例抽取。

① 横向按钮组 · Yellow 主题

② 单选按钮组 · 套餐 / 利率档

36 个月 48 个月 60 个月 72 个月

③ 操作栏 · 3 列等宽

④ 浮动操作栏 · 移动端底部固定

📐 规范

间距

按钮间 12px / 单选胶囊间 8px

最小高度

44px（H5 标准触控目标）

单选默认态

白底 + 灰边框

单选选中态

黄底 + 深字 + Yellow-500 边框

禁用态

Grey-200 底 + Text-Disabled 文字

🎨 对应 Tokens

状态	用 Token
单选 default	`BG-Card` (#FFFFFF) + `Border-Line` (#DDDDDD)
单选 selected	`Yellow/50` (#FFFAE9) + `Yellow/500` (#FFCF20) 边框
按钮组 active	`Yellow/500` (#FFCF20) + `Text-Important`
操作栏 Yellow	`Button-Primary-Default` (#FFCF20)
操作栏 Blue	`Blue/500` (#0056FA) + white 文字

Button · 按钮组件