Button
A button is a command component to trigger an operation.
Install
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,outlineandtextbutton types. - Icon: Icons can be used in buttons. When
iconis 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,mediumandlargein size, with corresponding height of24px/28px/32px/36px. The recommended and default size ismedium. The suitable size can be selected in different scenarios and different business needs. - Status: Buttons can be in
warning,danger, andsuccessstatus. Status can co-exist withtypebut 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<HTMLAnchorElement> | - |
| className | Additional css class | string | string[] | - |
| style | Additional style | CSSProperties | - |
| onClick | Callback fired when the button is clicked | (e: Event) => void | - |