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.
You can change the color of the Button with the property type.
Different state.
The opposite color.
No background until you look at the color of the text, the quietest of the four variants.
The spotlight prop adds a glow that follows the pointer on hover.
You can completely round the corners of any type of Button with the rounded property.
Buttons of different sizes.
The color and size of the icon will be set automatically.
Show progress while the action runs and the result when it ends. The button is disabled after saving so it cannot run twice.
| 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 |
| spotlight | glow that follows the pointer on hover | boolean | - | false |
| 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', ... | - |
type ButtonTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
| 'abort'
| 'primary-light'
| 'secondary-light'
| 'success-light'
| 'warning-light'
| 'error-light'
| 'info-light'