Button
Used to start an immediate operation.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Used to start an immediate operation.
When to Use
Marks or encapsulates a group of operation commands, responds to user click behavior, and triggers corresponding business logic.
Demos
Button
Props
| Name | Description | Type | Default |
|---|---|---|---|
| block | Should the button displays as block element. | boolean | false |
| color | The color of the button. | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' |
| disabled | Should the button be disabled. | boolean | false |
| fill | The fill mode. | 'solid' | 'outline' | 'none' | 'solid' |
| loading | Should the button displays as loading state. 'auto' will update loading state based on the Promise state of onClick | boolean | 'auto' | false |
| loadingIcon | The customized icon in loading state. | ReactNode | <DotLoading color='currentColor' /> |
| loadingText | The extra text displayed in loading state. | string | - |
| onClick | The click event. | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | - |
| shape | The shape of the button. | 'default' | 'rounded' | 'rectangular' | 'default' |
| size | The size of the button. | 'mini' | 'small' | 'middle' | 'large' | 'middle' |
| type | The type prop of native button element. | 'submit' | 'reset' | 'button' | 'button' |
In addition, the following properties of the native button element are supported: onMouseDown onMouseUp onTouchStart onTouchEnd form.
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --background-color | Background color of the button. | var(--adm-color-background) | --adm-button-background-color |
| --border-color | Border color of the button. | var(--adm-color-border) | --adm-button-border-color |
| --border-radius | Border radius of the button. | 4px | --adm-button-border-radius |
| --border-style | Border style of the button. | solid | --adm-button-border-style |
| --border-width | Border width of the button. | 1px | --adm-button-border-width |
| --text-color | Text color of the button. | var(--adm-color-text) | --adm-button-text-color |
Ref
| Name | Description | Type |
|---|---|---|
| nativeElement | Native button element | HtmlButtonElement | null |