---
title: 按钮 Btn
url: https://ui.zhaozimin.cn/components/button/
markdown: https://ui.zhaozimin.cn/components/button.md
group: 组件
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
- src/system/components/v4/Button.jsx # https://ui.zhaozimin.cn/src/system/components/v4/Button.jsx
- src/system/styles/v4/controls.css # https://ui.zhaozimin.cn/src/system/styles/v4/controls.css
version: v0.2.0 # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4 # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.cn/v/0.2.0/zzm.css # 锁版本地址，本仓库再改也不影响你
tokens: [--zzm-accent]
---
# 按钮 Btn
> 光从正上方来——每个按钮都是一枚真实的键：凸面渐变、顶部反光、贴地投影、反光光晕、按压内陷。文字按钮一律圆角矩形，禁胶囊。
## 试验台
三条轴自由组合：五种键面 × 三档高度 × 三种状态。下方同时给出对应的 JSX 和类名。
### 样张 · ButtonPlayground
（交互试验台，仅在网页上可操作；各组合的代码见下方样张）
## 五种键面
**纸键**是默认；**墨键**给一屏里最主要的操作；**朱键**只给品牌强调、播放或破坏性确认；**幽灵键**静默时是文字，悬停才「长成键」，用于工具条；**暗面键**只在深色面上用。
### 样张 · 纸 · 墨 · 朱 · 幽灵
React：
```jsx
import { Btn, btnClass } from './components/v4/Button.jsx'
export function Variants() {
return (
<>
纸键（默认）
墨键 · 主操作
朱键 · 强调
幽灵键
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
### 样张 · 暗面键
付款页 / 播放器锁罩 / 海报态
React：
```jsx
import { Btn, btnClass } from './components/v4/Button.jsx'
export function OnDark() {
return (
<>
暗面键
朱键在暗面同样成立
禁用
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 三档高度
高度落在 4pt 网格上：`sm` 28（工具条）、`md` 36（表单与一般操作）、`lg` 44（主操作，圆角升到 12）。`icon` 把键变成正方形。
### 样张 · 28 · 36 · 44 · 图标键
React：
```jsx
import { Btn, btnClass } from './components/v4/Button.jsx'
export function Sizes() {
return (
<>
小 · 28
中 · 36
大 · 44 · 圆角 12
✦
‹
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 等待与禁用：两种语义两张脸
`busy` 是「正在做」：出旋转环、一道反光扫过、饱和度略降、不可点，但**保留变体本色**。`disabled` 是「不能做」：灰面灰字。禁用**永远不用 opacity 淡化**——白字 × 半透明 × 灰面会让字直接消失。任何点击后要等的按钮都用 `busy`。
### 样张 · busy 与 disabled
React：
```jsx
import { Btn, btnClass } from './components/v4/Button.jsx'
export function States() {
return (
<>
Saving…
保存中…
提交中…
禁用
禁用 · 灰面灰字
)
}
```
HTML（构建时由上面的 React 渲染得到，可直接粘贴）：
```html
```
## 链接长成键
``、`