Button
Commonly used button.
Basic usage
Disabled Button
The disabled attribute determines if the button is disabled.
Text Button
Buttons without border and background.
Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
Button Group
Displayed as a button group, can be used to group a series of similar operations.
Loading Button
Click the button to load data, then the button displays a loading state.
Set loading attribute to true to display loading state.
TIP
You can use the loading slot or loadingIcon to customize your loading component
ps: loading slot has higher priority than loadingIcon
Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
Custom Color beta
You can custom button color.
We will calculate hover color & active color automatically.
Button Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| circle | determine whether it's a circle button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| loading-icon | customize loading icon component | string / Component | — | Loading |
| disabled | disable the button | boolean | — | false |
| icon | icon component | string / Component | — | — |
| autofocus | same as native button's autofocus | boolean | — | false |
| native-type | same as native button's type | string | button / submit / reset | button |
| auto-insert-space | automatically insert a space between two chinese characters | boolean | — |
Button Slots
| Name | Description |
|---|---|
| — | customize default content |
| loading | customize loading component |
| icon | customize icon component |
Button-Group Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| size | control the size of buttons in this button-group | string | same as button's size | — |
| type | control the type of buttons in this button-group | string | same as button's type | — |
Button-Group Slots
| Name | Description | Subtags |
|---|---|---|
| - | customize button group content | Button |