## Button
Commonly used button.
### Basic usage
::: demo Button provides 7 themes defined by the `type` attribute.
```html
Default Button
Primary Button
Text Button
```
:::
### Disabled Button
The `disableds` 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 Button
Primary Button
Text Button
```
:::
### Color Indication
Different colors represent different meanings.
:::demo Use `plain` attribute to create a plain button, and it accepts a `Boolean` value. You can assign different `type` to a plain button as mentioned above. **Note**: When using the plain button, you still can set `type` to `text`, but it makes no difference. A plain button will be styled like a `text button` by default.
```html
Default
Success
Warning
Danger
Info
Hover to display color
Success
Warning
Danger
Info
```
:::
### Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
:::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 `large`, `small` or `mini`.
```html
Large Button
Default Button
Small Button
Mini Button
```
:::
### Attributes
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- |
| size | button size | string | large/small/mini | — |
| type | button type | string | primary/success/warning/danger/info/text | — |
| plain | determine whether it's a plain button | Boolean | true,false | false |
| disabled | disable the button | boolean | true, false | false |
| icon | button icon, accepts an icon name of Element icon component | string | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button/submit/reset | button |