按钮 Button
用于开始一个即时操作。
安装
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 |