# Button

- Page: https://jiguang132.com/resources/arco-design/docs/button
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

A button is a command component to trigger an operation.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: There are `primary`, `secondary`, `dashed`, `outline` and `text` button types.
- **Icon**: Icons can be used in buttons. When `icon` is set and there are no children, the height and width of the button are equal.
- **Shape**: Button has many shapes, `square`-rectangle **(default)**, `circle`-round, `round`-full rounded corners.
- **Size**: Buttons can be `mini`, `small`, `medium` and `large` in size, with corresponding height of `24px/28px/32px/36px`. The recommended and default size is `medium`. The suitable size can be selected in different scenarios and different business needs.
- **Status**: Buttons can be in `warning`, `danger`, and `success` status. Status can co-exist with `type` but with higher priority.
- **Disabled**: The disabled state of the button.
- **Loading**: A button can be on loading state by setting `loading`. Click events are not triggered when buttons are on loading state.
- **Button group**: Button group can be used to group together operation buttons at the same level.
- **Long**: The button width adapts to the container width.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Button

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|disabled|Whether to disable the button|boolean |`-`|
|iconOnly|Whether to show icon only, in which case the button width and height are equal. If `icon` is specified and there are no children, `iconOnly` defaults to `true`|boolean |`-`|
|loading|Whether the button is in the loading state|boolean |`-`|
|loadingFixedWidth|The width of the button remains unchanged on loading|boolean |`-`|
|long|Whether the width of the button should adapt to the container.|boolean |`-`|
|href|The button behaves like `<a>` with href as target url.|string |`-`|
|target|The target attribute of the link, which takes effect when href exists.|string |`-`|
|htmlType|html button type|'button' \| 'submit' \| 'reset' |`button`|
|shape|Three button shapes are available: `circle`, `round` and `square`|'circle' \| 'round' \| 'square' |`square`|
|size|Size of the button|'mini' \| 'small' \| 'default' \| 'large' |`default`|
|status|Status of the button|'warning' \| 'danger' \| 'success' \| 'default' |`default`|
|type|A variety of button types are available: `primary`, `secondary`, `dashed`,`text`, `linear` and `default` which is the secondary.|'default' \| 'primary' \| 'secondary' \| 'dashed' \| 'text' \| 'outline' |`default`|
|icon|Icon of the button|ReactNode |`-`|
|anchorProps|The native attribute of the link, which takes effect when href exists|HTMLProps&lt;HTMLAnchorElement&gt; |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|onClick|Callback fired when the button is clicked|(e: Event) => void |`-`|

---

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