--- title: Button lang: en-US --- # 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 ::: ## Link Button :::warning `type="text"` has been **deprecated**, and **will be** removed in , consider switching to new API. New API `link` has been added in , you can use `type` API to set the theme of your link button ::: :::demo button/link ::: ## Text Button :::tip Text button has been upgraded with a new design since 2.2.0 , 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. ::: 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 `` 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 `` to group your buttons. button/group ::: ## 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 ::: :::demo button/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`. button/size ::: ## Custom Color You can custom button color. We will calculate hover color & active color automatically. :::demo button/custom ::: ## 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 | | text | determine whether it's a text button | boolean | — | false | | bg | determine whether the text button background color is always on | boolean | — | false | | link | 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 | `Component \| (() => VNode)` | — | Loading | | disabled | disable the button | boolean | — | false | | icon | icon component | `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 | | — | ## 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 |