## Button
Commonly used button.
### Basic usage
:::demo Use `type`, `plain` and `round` to define Button's style.
```html
Default
Primary
Success
Info
Warning
Danger
Plain
Primary
Success
Info
Warning
Danger
Round
Primary
Success
Info
Warning
Danger
```
:::
### Disabled Button
The `disabled` attribute determines if the button is disabled.
:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
```html
Default
Primary
Success
Info
Warning
Danger
Plain
Primary
Success
Info
Warning
Danger
```
:::
### Text Button
Buttons without border and background.
:::demo
```html
Text Button
Text Button
```
:::
### Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `` tag. Custom icons can be used as well.
```html
Search
Upload
```
:::
### Button Group
Displayed as a button group, can be used to group a series of similar operations.
:::demo Use tag `` to group your buttons.
```html
Previous Page
Next Page
```
:::
### Loading Button
Click the button to load data, then the button displays a loading state.
:::demo Set `loading` attribute to `true` to display loading state.
```html
Loading
```
:::
### Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```html
Default
Medium
Small
Mini
Default
Medium
Small
Mini
```
:::
### Attributes
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- |
| size | button size | string | medium / small / mini | — |
| 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 |
| loading | determine whether it's loading | boolean | — | false |
| disabled | disable the button | boolean | — | false |
| icon | icon class name | string | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |