# Button

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/button
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Used to start an immediate operation.

## Install

```bash
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` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt