A button component used to trigger actions.

Attributes

Parameter	Description	Type	Optional Values	Default	PC/Mobile Support
size	Size	string	medium / small / mini	—	PC only
type	Type	string	primary / success / warning / danger / info / text	—	Mobile only supports primary / success / default / danger
plain	Whether it is a plain button	boolean	—	false	PC/Mobile
round	Whether it is a rounded button	boolean	—	false	PC only
circle	Whether it is a circular button	boolean	—	false	PC only
loading	Whether it is in loading state	boolean	—	false	PC/Mobile
disabled	Whether it is disabled	boolean	—	false	PC/Mobile
icon	Icon class name	string	—	—	PC only
autofocus	Whether autofocus is enabled by default	boolean	—	false	PC only
native-type	Native type attribute	string	button / submit / reset	button	PC only

Slot

Mobile only.

name	Description
content	Button content

Basic Usage

Basic button usage.

  <fx-row>
    <fx-button>Default Button</fx-button>
    <fx-button type="primary">Primary Button <i class="el-icon-arrow-down"></i></fx-button>
    <fx-button type="success">Success Button</fx-button>
    <fx-button type="info">Info Button</fx-button>
    <fx-button type="warning">Warning Button</fx-button>
    <fx-button type="danger">Danger Button</fx-button>
  </fx-row>

Disabled State

The button is disabled.

<fx-row>
  <fx-button disabled>Default Button</fx-button>
  <fx-button type="primary" disabled>Primary Button</fx-button>
</fx-row>

Text Button

A button without border or background color.

<fx-button type="text">Text Button</fx-button>
<fx-button type="text" disabled>Text Button</fx-button>

Icon Button

Buttons with icons can improve recognition when text is present, or save space when text is absent.

<fx-button type="primary" icon="el-icon-edit"></fx-button>
<fx-button type="primary" icon="el-icon-share"></fx-button>
<fx-button type="primary" icon="el-icon-delete"></fx-button>
<fx-button type="primary" icon="el-icon-search">Search</fx-button>
<fx-button type="primary">Upload<i class="el-icon-upload el-icon--right"></i></fx-button>

Button Group

Displayed as a button group, commonly used for multiple similar actions.

<fx-button-group>
  <fx-button type="primary" icon="el-icon-arrow-left">Previous Page</fx-button>
  <fx-button type="primary">Next Page<i class="el-icon-arrow-right el-icon--right"></i></fx-button>
</fx-button-group>

Loading

Displays a loading state on the button while data is being loaded after clicking.

<fx-button type="primary" :loading="true">Loading</fx-button>

Different Sizes

In addition to the default size, the Button component provides multiple sizes that can be used in different scenarios.

<fx-row>
  <fx-button>Default Button</fx-button>
  <fx-button size="medium">Medium Button</fx-button>
  <fx-button size="small">Small Button</fx-button>
  <fx-button size="mini">Mini Button</fx-button>
  <fx-button size="micro">Micro Button</fx-button>
</fx-row>