2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Button
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Button
Commonly used button.
## Basic usage
:::demo Use `type` , `plain` , `round` and `circle` to define Button's style.
button/basic
:::
## 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.
button/disabled
:::
2022-05-18 00:39:31 +08:00
## Link Button
2022-05-14 12:58:09 +08:00
2022-05-18 00:39:31 +08:00
:::warning
`type="text"` has been **deprecated** , and **will be** removed in < VersionTag version = "3.0.0" /> , consider switching to new API.
2022-05-24 09:36:23 +08:00
New API `link` has been added in < VersionTag version = "2.2.1" /> , you can use `type` API to set the theme of your link button
2022-05-18 00:39:31 +08:00
:::
2022-05-14 12:58:09 +08:00
:::demo
button/link
:::
2021-09-17 00:18:50 +08:00
## Text Button
2022-05-05 23:53:47 +08:00
:::tip
Text button has been upgraded with a new design since < el-tag round effect = "plain" size = "small" > 2.2.0< / el-tag > , if you want to use the
previous version like button, you might want to check [Link ](./link.md#basic ) out.
The API is also updated, because the `type` attribute also represents the button's style. So we have to make a new API
`text: boolean` for text button.
:::
2021-09-17 00:18:50 +08:00
Buttons without border and background.
:::demo
button/text
:::
## 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 Plus icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
button/icon
:::
## Button Group
Displayed as a button group, can be used to group a series of similar operations.
:::demo Use tag `<el-button-group>` to group your buttons.
button/group
:::
## Loading Button
Click the button to load data, then the button displays a loading state.
2022-01-22 10:11:35 +08:00
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
:::
:::demo
2021-09-17 00:18:50 +08:00
button/loading
:::
## Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
2021-12-12 17:54:21 +08:00
:::demo Use attribute `size` to set additional sizes with `large` , `small` .
2021-09-17 00:18:50 +08:00
button/size
:::
2022-05-05 19:56:10 +08:00
## Custom Color <VersionTag version="beta" />
2021-11-19 20:22:16 +08:00
You can custom button color.
We will calculate hover color & active color automatically.
:::demo
button/custom
:::
2021-09-17 00:18:50 +08:00
## Button Attributes
2022-08-28 19:13:58 +08:00
| Attribute | Description | Type | Accepted Values | Default |
| ----------------------------------- | --------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------- | ------- |
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / < del > text< / del > | — |
| plain | determine whether it's a plain button | boolean | — | false |
| text < VersionTag version = "2.2.0" / > | determine whether it's a text button | boolean | — | false |
| bg < VersionTag version = "2.2.0" / > | determine whether the text button background color is always on | boolean | — | false |
| link < VersionTag version = "2.2.1" / > | determine whether it's a link 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 \| (() => VNode)` | — | Loading |
| disabled | disable the button | boolean | — | false |
| icon | icon component | `string \| Component \| (() => VNode)` | — | — |
| 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 | | — |
2021-09-17 00:18:50 +08:00
2021-10-04 08:26:51 +08:00
## Button Slots
2022-01-22 10:11:35 +08:00
| Name | Description |
| ------- | --------------------------- |
| — | customize default content |
| loading | customize loading component |
2022-03-01 00:11:24 +08:00
| icon | customize icon component |
2021-10-04 08:26:51 +08:00
2021-09-17 00:18:50 +08:00
## Button-Group Attributes
2022-02-24 10:15:28 +08:00
| 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 | — |
2021-09-17 00:18:50 +08:00
## Button-Group Slots
2021-10-04 08:26:51 +08:00
| Name | Description | Subtags |
| ---- | ------------------------------ | ------- |
| - | customize button group content | Button |
