Used to trigger an operation.
The basic Button contains an animation effect.
Show running status.
Do not respond to any action.
The shadow highlights the level of the button.
Different state.
The opposite color.
Buttons of different sizes.
The color and size of the icon will be set automatically.
Anchor in button style
Button.Props| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | button type | ButtonTypes | ButtonTypes | default |
| size | button size | NormalSizes | NormalSizes | medium |
| ghost | the opposite color | boolean | - | false |
| loading | display loading indicator | boolean | - | false |
| shadow | display shadow | boolean | - | false |
| auto | autoscale width | boolean | - | false |
| effect | display animation | boolean | - | true |
| disabled | disable button | boolean | - | false |
| onClick | click handler | MouseEventHandler | - | - |
| icon | show icon in button | ReactNode | - | - |
| iconRight | show icon on the other side of the button | ReactNode | - | - |
| htmlType | native type of button element | ButtonHTMLAttributes.type | - | button |
| ref | forwardRef | Ref<HTMLButtonElement | null> | - | - |
| ... | native props | ButtonHTMLAttributes | 'id', 'className', ... | - |
ButtonLink.Props| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| href | Link target | string | - | - |
| size | button link size | NormalSizes | NormalSizes | medium |
| ghost | the opposite color | boolean | - | false |
| loading | display loading indicator | boolean | - | false |
| shadow | display shadow | boolean | - | false |
| auto | autoscale width | boolean | - | false |
| effect | display animation | boolean | - | true |
| disabled | disable button link | boolean | - | false |
| onClick | click handler | MouseEventHandler | - | - |
| icon | show icon in button link | ReactNode | - | - |
| iconRight | show icon on the other side of the button link | ReactNode | - | - |
| ref | forwardRef | Ref<HTMLAnchorElement | null> | - | - |
| ... | native props | AnchorHTMLAttributes | 'id', 'className', ... | - |
ButtonTypestype ButtonTypes =
| 'default'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'abort'
| 'secondary-light'
| 'success-light'
| 'warning-light'
| 'error-light'
NormalSizestype NormalSizes = 'mini' | 'small' | 'medium' | 'large'