按钮 — 状态变体

共 18 个变体，覆盖主要/次要/图标三种按钮类型 × 6 个状态。

主要按钮（Primary）

Default
默认可点击状态
Hover
鼠标移入，背景变亮
Pressed
按下瞬间，缩小 0.97
Disabled
不可点击，降低对比度
Loading
加载中，显示 spinner + 文字
Success
操作成功反馈，绿色确认

次要按钮（Secondary）

Default
白底 + 灰色边框
Hover
边框加深 + 浅灰背景
Pressed
缩小 0.97
Disabled
低对比度，不可点击
Loading
灰色 spinner + 文字
Success
绿色边框 + 浅绿背景

图标按钮（Icon Button）

Default
浅灰背景，默认图标色
Hover
背景加深，图标变黑
Pressed
背景更深，缩小 0.93
Disabled
图标降低对比度
3
有未读数
右上角红点 + 数字
Active
激活状态，黑底白图标

按钮尺寸

Small
px-3 py-1.5 text-xs rounded-md
Medium（默认）
px-5 py-2.5 text-sm rounded-lg
Large
px-8 py-3 text-base rounded-xl

设计 Tokens

Token Primary Secondary Icon
Default 背景 #171717 white #f5f5f5
Hover 背景 #404040 #fafafa + border #a3a3a3 #e5e5e5
Pressed 背景 #262626 + scale(0.97) #f5f5f5 + scale(0.97) #d4d4d4 + scale(0.93)
Disabled 背景 #d4d4d4 #fafafa + border #e5e5e5 #f5f5f5
过渡 all 0.2s cubic-bezier(0.4, 0, 0.2, 1)