Button

Commonly used button.

Basic usage

Disabled Button

The disabled attribute determines if the button is disabled.

WARNING

type="text" has been deprecated, and will be removed in 3.0.0, consider switching to new API.

New API link has been added in 2.2.1, you can use type API to set the theme of your link button

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 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.

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

NameDescriptionTypeAccepted ValuesDefault
sizebutton sizestringlarge / default /small
typebutton typestringprimary / success / warning / danger / info / text
plaindetermine whether it's a plain buttonbooleanfalse
text 2.2.0determine whether it's a text buttonbooleanfalse
bg 2.2.0determine whether the text button background color is always onbooleanfalse
link 2.2.1determine whether it's a link buttonbooleanfalse
rounddetermine whether it's a round buttonbooleanfalse
circledetermine whether it's a circle buttonbooleanfalse
loadingdetermine whether it's loadingbooleanfalse
loading-iconcustomize loading icon componentstring | ComponentLoading
disableddisable the buttonbooleanfalse
iconicon componentstring | Component
autofocussame as native button's autofocusbooleanfalse
native-typesame as native button's typestringbutton / submit / resetbutton
auto-insert-spaceautomatically insert a space between two chinese charactersboolean

Button Slots

NameDescription
customize default content
loadingcustomize loading component
iconcustomize icon component

Button-Group Attributes

NameDescriptionTypeAccepted ValuesDefault
sizecontrol the size of buttons in this button-groupstringlarge / default /small
typecontrol the type of buttons in this button-groupstringprimary / success / warning / danger / info

Button-Group Slots

NameDescriptionSubtags
-customize button group contentButton

Source

ComponentDocs

Contributors