# 按钮 Button

分类：操作 · React：Button

按钮文字描述下一次点击会做什么。一处只放一个实心按钮。

## 示例
```html
<button class="xxd-btn" data-variant="primary">写入 X</button>
<button class="xxd-btn">保存草稿</button>
<button class="xxd-btn" data-variant="ghost">稍后</button>
<button class="xxd-btn" data-variant="danger">删除</button>
<button class="xxd-btn" data-variant="outline">导出</button>
<button class="xxd-btn" data-size="xs">xs</button>
```

### 尺寸

```html
<button class="xxd-btn" data-size="xs">xs</button>
<button class="xxd-btn" data-size="sm">sm</button>
<button class="xxd-btn">md</button>
<button class="xxd-btn" data-size="lg">lg</button>
```

### 图标按钮
纯图标按钮必须有 aria-label；悬停时 tooltip 连续出现。圆形图标按钮跟随圆角开关。
```html
<button class="xxd-btn" data-icon-only aria-label="搜索" data-tooltip="搜索 ⌘F"><i data-xxd-icon="Search"></i></button>
<button class="xxd-btn" data-icon-only data-shape="round" aria-label="新建" data-tooltip="新建"><i data-xxd-icon="Plus"></i></button>
<button class="xxd-btn" data-variant="ghost" data-icon-only aria-label="更多" data-tooltip="更多"><i data-xxd-icon="Ellipsis"></i></button>
```

### 纯平 / 质感（D1 对比）
右上角「主色」里把按钮质感切到「质感」：实心按钮多一条顶部 1px 内高光、深一点的边，按下时下沉 0.5px。
```html
<div class="xxd-cluster" data-finish-preview="flat"><button class="xxd-btn" data-variant="primary">写入 X</button><button class="xxd-btn" data-variant="danger">删除</button></div>
```

### 进行中与完成
点一下：宽度不跳，转圈居中；完成后图标变勾 1 秒。
```html
<button class="xxd-btn" data-variant="primary" onclick="Xxd.runBusy(this, () => new Promise((r) => setTimeout(r, 1200)))"><i data-xxd-icon="Save" data-size="16"></i>保存</button>
```

## 属性与类名
- `data-variant`：primary | secondary（缺省）| ghost | outline | danger | danger-outline
- `data-size`：xs | sm | md | lg
- `data-icon-only`：纯图标（必须有 aria-label）
- `aria-pressed`：切换态
- `aria-busy`：进行中：宽度不跳，转圈居中；Xxd.runBusy(btn, task) 完成后图标变勾
- `data-block`：撑满一行
- `data-shape`：round：圆形图标按钮（跟随圆角开关）
- 类名：`xxd-btn` `xxd-label-text`

## JS
```js
await Xxd.runBusy(button, () => save())
```

## 键盘与读屏
- 只有图标的按钮必须写 aria-label（tooltip 不算名字）
- 进行中写 aria-busy="true"：文字隐藏、出 spinner，读屏仍读按钮名
- 切换按钮用 aria-pressed；按下 / 禁用 / 聚焦状态都不只靠颜色
- 紧凑模式下按钮变矮，点击区仍不小于 --hit-min（40px，触屏 44px）

## 规则
- 按钮文字描述下一次点击会做什么
- 一处只放一个实心按钮
- 破坏性操作写清楚，不只靠颜色
- §9
- 长标签包在 <span> 里（或加 .xxd-label-text）才有省略号；按钮永远不会撑出容器，裸文字超长时只会被裁掉。