Commonly used button.

Basic usage

Disabled Button

The disabled attribute determines if the button is disabled.

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.


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

AttributeDescriptionTypeAccepted ValuesDefault
sizebutton sizestringlarge / default /small
typebutton typestringprimary / success / warning / danger / info / text
plaindetermine whether it's a plain buttonbooleanfalse
rounddetermine whether it's a round buttonbooleanfalse
circledetermine whether it's a circle buttonbooleanfalse
loadingdetermine whether it's loadingbooleanfalse
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

customize default content

Button-Group Attributes

AttributeDescriptionTypeAccepted ValuesDefault
sizecontrol the size of buttons in this button-groupstringlarge / small
typecontrol the type of buttons in this button-groupstringprimary / success / warning

Button-Group Slots

-customize button group contentButton