Button
Used to trigger an operation.
General
The basic Button contains an animation effect.
Loading
Show running status.
Disabled
Do not respond to any action.
Shadow
The shadow highlights the level of the button.
Type Colors
You can change the color of the Button with the property type.
Lighted
Different state.
Ghost
The opposite color.
Subtle
No background until you look at the color of the text, the quietest of the four variants.
Rounded
You can completely round the corners of any type of Button with the rounded property.
Scale
Buttons of different sizes.
With Icons
The color and size of the icon will be set automatically.
APIs
Button.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | button type | ButtonTypes | ButtonTypes | default |
| ghost | the opposite color | boolean | - | false |
| subtle | no background, only the type's color | boolean | - | false |
| rounded | rounded button | 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', ... | - |
ButtonTypes
type ButtonTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
| 'abort'
| 'primary-light'
| 'secondary-light'
| 'success-light'
| 'warning-light'
| 'error-light'
| 'info-light'