# 按钮 Button

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/button
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

用于开始一个即时操作。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

用于开始一个即时操作。

## 何时使用

标记了一个或封装一组操作命令，响应用户点击行为，触发相应的业务逻辑。

## 示例

## Button

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| block | 是否是块级元素 | `boolean` | `false` |
| color | 按钮的颜色 | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` |
| disabled | 是否禁用 | `boolean` | `false` |
| fill | 填充模式 | `'solid' \| 'outline' \| 'none'` | `'solid'` |
| loading | 是否处于加载状态，`'auto'` 模式会监听 `onClick` 的 `Promise` 状态自动更新 `loading` | `boolean \| 'auto'` | `false` |
| loadingIcon | 加载状态下的 `icon` 图标 | `ReactNode` | `<DotLoading color='currentColor' />` |
| loadingText | 加载状态下额外展示的文字 | `string` | - |
| onClick | 点击事件 | `(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void \| Promise<void>` | - |
| shape | 按钮的形状 | `'default' \| 'rounded' \| 'rectangular'` | `'default'` |
| size | 大小 | `'mini' \| 'small' \| 'middle' \| 'large'` | `'middle'` |
| type | 原生 `button` 元素的 `type` 属性 | `'submit' \| 'reset' \| 'button'` | `'button'` |

此外，还支持原生 `button` 元素的以下属性：`onMouseDown` `onMouseUp` `onTouchStart` `onTouchEnd` `form`。

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 |
| --- | --- | --- | --- |
| --background-color | 背景颜色 | `var(--adm-color-background)` | `--adm-button-background-color` |
| --border-color | 边框颜色 | `var(--adm-color-border)` | `--adm-button-border-color` |
| --border-radius | 圆角大小 | `4px` | `--adm-button-border-radius` |
| --border-style | 边框样式 | `solid` | `--adm-button-border-style` |
| --border-width | 边框宽度 | `1px` | `--adm-button-border-width` |
| --text-color | 文字颜色 | `var(--adm-color-text)` | `--adm-button-text-color` |

### Ref

| 属性          | 说明             | 类型                          |
| ------------- | ---------------- | ----------------------------- |
| nativeElement | 原始 button 元素 | `HtmlButtonElement` \| `null` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt