Button 按钮

按钮按视觉强调度分 5 类。当前文档覆盖 Solid（v0.1）、Background（v0.2）、Trans（v0.3）、No-Effect（v0.4），v0.5 补齐了 Icon-only、No-Effect Small 和 ButtonGroup。剩余 FAB 见底部路线图。

设计原则

• Solid 一个界面只能有一个，用于"最重要的那个行动"
• Background 用于次要行动，有持续背景；含 active / on-focus 两种"持续选中"语义
• Trans 平时透明，只有 hover/press 才显示底色——用于不抢视觉但又需要交互的入口
• No-Effect 内文按钮，永远没 bg，只有文字颜色变化——用于段落内 / 表格行内的轻量操作
• warning / error 颜色用于不可恢复操作（删除、警告恢复等）

当前实现范围

• ✅ Solid Button (3 colors × 5 states)
• ✅ Background Button (6 colors × 5 states + active / on-focus)
• ✅ Trans Button (6 colors × 5 states + active / on-focus)
• ✅ No-Effect Button (6 colors × 5 states + active / on-focus + default/small size)
• ✅ Icon-only 模式（4 type 共享）
• ✅ Button Group（spacing / with-border 两种 style）
• ⏳ FAB · 见路线图

快速预览

Playground 试玩

实时调下方控件，预览即时变化。底部代码块自动同步——点击复制。

Active / On-focus 只对 type="background" 且 color 非 warning/error 时生效。

Typesolidbackgroundtransno-effect

Colorthemewarningerror

Statedefaulthoverpressed

Sizedefaultsmall仅 no-effect

Disabled

Loading

Active仅非 solid + theme/white-*

On-focus同上

Icon-only

Icon before

Icon after

Label

<Button>主要操作</Button>

✓ 已复制

---

Solid Button

强调按钮，级别最高，用于主要行动。bg 跟随 Foundation Color 的「彩色 solid」规律变化（default = color-3、hover = color-2、pressed = color-4），disabled 用整体 opacity: 0.4。

	default	hover	pressed
theme
warning
error

---

Background Button

次要按钮，bg 不分颜色全用 bg/light 半透明灰（default = bg-light-3、hover = light-4、pressed = dark-1、disabled = light-2）；fg 按 6 色各自 InteractRow 规律变。active / on-focus 表示"持续选中"状态，无视 color 强制变 theme 绿。

Base（无 active / on-focus）

	default	hover	pressed	disabled
theme
warning
error
white-sec
white-ter
white-qua

Active=on（持续选中 — toggle）

color 任意，视觉强制 theme 绿；bg 用 thm-T8 → T15 → T4 半透明叠加。

	default	hover	pressed	disabled
theme
white-sec

On-focus=on（弹层 / dropdown 打开时）

color 任意，视觉强制 theme 绿；bg 用 bg-dark-2 → dark-3 → dark-4 深色叠加。

	default	hover	pressed	disabled
theme
white-sec

---

Trans Button

透明按钮。平时 bg 完全透明，只有 hover/press 时才显示底色——用于"不抢视觉但又需要可点"的入口（链接、列表里的次要操作、内嵌按钮组等）。除了 base 段的 default/disabled/loading bg 是透明，其他规则（fg + active + on-focus）完全跟 Background 共享。

Base（无 active / on-focus）

	default	hover	pressed	disabled
theme
warning
error
white-sec
white-ter
white-qua

Trans vs Background 的唯一差异

	Trans	Background
default bg	bg-light-1 (透明)	bg-light-3 (6% 白)
disabled bg	bg-light-1 (透明)	bg-light-2 (3% 白)
hover / press bg	bg-light-4 / bg-dark-1	bg-light-4 / bg-dark-1（一致）
fg / active / on-focus	跟 Background 完全一致	同

Active=on / On-focus=on

跟 Background 完全一致（强制 theme 绿覆盖）。这里只展示 theme + white-sec，更多组合用 Playground 试。

	active=on default	active=on hover	on-focus=on default	on-focus=on hover
theme
white-sec

---

No-Effect Button

内文按钮——任何状态下 bg 都完全透明，只有文字颜色变化。视觉上就像一段有颜色的可点文字（类似超链接的视觉权重）。常用于段落内插入操作、表格行内 hover-on-row 出现的操作。

几何也最紧凑：padding: 0、radius: 2、height = 20（= 行高）。直接放进文本流不会破坏行距。

Base（无 active / on-focus）

	default	hover	pressed	disabled
theme
warning
error
white-sec
white-ter
white-qua

Active=on / On-focus=on（视觉一致）

TIP

No-Effect 没有 bg，所以 active=on 和 on-focus=on 唯一的视觉表达都是「文字色被强制成 theme 绿」。两者视觉完全相同，只在语义上区分（toggle 选中 vs 弹层打开）。

	default	hover	pressed	disabled
white-sec :active
white-sec :on-focus

内文示例

放在一段文字中：你已选择 ，点击 完成清理，或者 。

Small size

字号 12 / 行高 16（默认是 14 / 20），用于密度更高的场景（表格内、紧凑卡片等）。

	default	small
theme
error
white-sec

Size prop

当前 size="small" 只对 type="no-effect" 有视觉效果。其他 type 的 small 变体不在 Figma 设计中，暂不实现。

---

Icon-only 模式

iconOnly 让按钮变成「只显示一个图标的紧凑按钮」，常用于 toolbar、表格行操作。Solid 在 Figma 没设计 icon-only variant，但代码层面接受（视觉与 Background icon-only 等同）。

	default state	hover	active=on	disabled
background
trans
no-effect
no-effect (small)

几何（square / rect）：

Type	Size	备注
background / solid	32 × 32	完美正方形
trans	32 × 24	保持 trans 高度（24），非正方形
no-effect (default)	20 × 20	正方形
no-effect (small)	16 × 16	正方形

Button Group

多按钮组合。两种 style：

Spacing 模式（默认）

子按钮各自保持圆角，组之间 8px gap。

With-border 模式

子按钮共用一个外部 border，相邻按钮之间用 1px divider 分隔。多用于 Trans / No-Effect 类型组成 toolbar / segment 控件。

设计约束（仅文档，不在代码里强制）

• 一组按钮里只能有一个强调按钮（Solid）
• 一组按钮里其他按钮不可与 Background 同色（避免视觉冲突）
• 4 个以上按钮建议用 more 下拉收起多余按钮（下拉组件留待后续版本）

ButtonGroup API

Prop	类型	默认	说明
border	boolean	false	true 时使用挨在一起 + outer border 的 style

---

图标插槽

通过 icon-before / icon-after 传 Icon 名（group/name 格式）。Solid / Background 都支持，图标 16×16 跟随文字色（currentColor）。

API

Prop	类型	默认	说明
type	'solid' | 'background' | 'trans' | 'no-effect'	'solid'	按钮类型
color	见下	'theme'	颜色语义
size	'default' | 'small' | 'large'	'default'	small 仅 no-effect 有视觉差异；large 仅 trans + icon-only 生效 → 44×44（用于 sider footer / nav 类大热区按钮）
state	'default' | 'hover' | 'pressed'	'default'	强制状态（demo 用）
disabled	boolean	false	禁用
loading	boolean	false	加载中（覆盖文字 + 图标）
active	boolean	false	持续选中态（非 solid；warning/error 无效）
onFocus	boolean	false	弹层打开态（非 solid；warning/error 无效；no-effect 下视觉同 active）
iconOnly	boolean	false	只显示一个图标（square / rect），无 label
icon	string	—	iconOnly 模式下的图标名（group/name）
iconBefore	string	—	左侧图标名（非 iconOnly 模式）
iconAfter	string	—	右侧图标名（非 iconOnly 模式）

color 支持的值：

• type="solid" → theme / warning / error
• type="background" / trans / no-effect → 6 色（theme / warning / error / white-sec / white-ter / white-qua）

几何 & 字体

字体 + 动效全部共用，padding / radius / 总高度按 type 不同（从 Figma 实测）：

Type	Padding	Radius	Height	视觉感受
solid	6 × 12	4	32	标准强调按钮
background	6 × 12	4	32	同上
trans	2 × 8	4	24	紧凑、轻量
no-effect	0	2	20	等于行高，可嵌入文字流
no-effect (small)	0	2	16	字号 12 / 行高 16

Icon-only 几何另见上方 Icon-only 模式 章节。

共用：

	值
Font	PingFang SC 14 / weight 500 / line-height 20
Gap (icon ↔ label)	4
Transition	--mc-d-variants (70ms) ease-in-out

v0.3 修正

v0.3 上线时 Trans 误用了 Solid 的 padding（6×12 / 高 32），v0.4 已按 Figma 实测改成 2×8 / 高 24。如果 v0.3 上线后你已经在产品里硬编码了那时的尺寸，注意回归。

路线图

• ✅ v0.1 Solid Button
• ✅ v0.2 Background Button（含 active / on-focus）
• ✅ v0.3 Trans Button（含 active / on-focus；v0.4 修正了 padding）
• ✅ v0.4 No-Effect Button（含 active / on-focus；default size）
• ✅ v0.5 Icon-only 模式 + No-Effect Small + ButtonGroup（spacing / with-border）
• ⏳ v0.6 Floating Action Button (FAB)
• ⏳ v?.? Button Group 4+ 时的 more 下拉收起 + 完整设计 lint