Button

# FxButton

Commonly used operation buttons.

# Attributes

Attribute	Description	Type	Options	Default	Platform Support
size	button size	string	medium / small / mini	—	PC only
type	button type	string	primary / success / warning / danger / info / text	—	Mobile supports primary/success/default/danger only
plain	whether to use plain style	boolean	—	false	PC/Mobile
round	whether to use round corners	boolean	—	false	PC only
circle	whether to use circular shape	boolean	—	false	PC only
loading	whether to show loading state	boolean	—	false	PC/Mobile
disabled	whether disabled	boolean	—	false	PC/Mobile
icon	icon class name	string	—	—	PC only
autofocus	whether to get focus 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.

Default

Primary

Success

Info

Warning

Danger

Plain

Primary

Success

Info

Warning

Danger

Round

Primary

Success

Info

Warning

Danger

Use type, plain, round and circle to define Button's style.

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

  <fx-row>
    <fx-button plain>Plain</fx-button>
    <fx-button type="primary" plain>Primary</fx-button>
    <fx-button type="success" plain>Success</fx-button>
    <fx-button type="info" plain>Info</fx-button>
    <fx-button type="warning" plain>Warning</fx-button>
    <fx-button type="danger" plain>Danger</fx-button>
  </fx-row>

  <fx-row>
    <fx-button round>Round</fx-button>
    <fx-button type="primary" round>Primary</fx-button>
    <fx-button type="success" round>Success</fx-button>
    <fx-button type="info" round>Info</fx-button>
    <fx-button type="warning" round>Warning</fx-button>
    <fx-button type="danger" round>Danger</fx-button>
  </fx-row>

  <fx-row>
    <fx-button icon="el-icon-search" circle></fx-button>
    <fx-button type="primary" icon="el-icon-edit" circle></fx-button>
    <fx-button type="success" icon="el-icon-check" circle></fx-button>
    <fx-button type="info" icon="el-icon-message" circle></fx-button>
    <fx-button type="warning" icon="el-icon-star-off" circle></fx-button>
    <fx-button type="danger" icon="el-icon-delete" circle></fx-button>
  </fx-row>

Copy

# Disabled State

Disabled button state.

Default

Primary

Success

Info

Warning

Danger

Plain

Primary

Success

Info

Warning

Danger

The disabled attribute determines if a button is disabled. It accepts a Boolean value.

<fx-row>
  <fx-button disabled>Default</fx-button>
  <fx-button type="primary" disabled>Primary</fx-button>
  <fx-button type="success" disabled>Success</fx-button>
  <fx-button type="info" disabled>Info</fx-button>
  <fx-button type="warning" disabled>Warning</fx-button>
  <fx-button type="danger" disabled>Danger</fx-button>
</fx-row>

<fx-row>
  <fx-button plain disabled>Plain</fx-button>
  <fx-button type="primary" plain disabled>Primary</fx-button>
  <fx-button type="success" plain disabled>Success</fx-button>
  <fx-button type="info" plain disabled>Info</fx-button>
  <fx-button type="warning" plain disabled>Warning</fx-button>
  <fx-button type="danger" plain disabled>Danger</fx-button>
</fx-row>

Copy

# Text Button

Buttons without border and background color.

Text Button

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

Copy

# Icon Button

Buttons with icons for better recognition (with text) or space saving (without text).

Upload

Set the icon attribute. For icon list, please refer to Element's icon component. To place icon on the right side, use <i> tag. Custom icons are supported.

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

Copy

# Button Group

Display as button group, commonly used for multiple similar operations.

Use <fx-button-group> to nest your buttons.

<fx-button-group>
  <fx-button type="primary" icon="el-icon-arrow-left">Previous</fx-button>
  <fx-button type="primary">Next<i class="el-icon-arrow-right el-icon--right"></i></fx-button>
</fx-button-group>
<fx-button-group>
  <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-group>

Copy

# Loading State

Show loading state when clicking button to load data.

Set loading attribute to true to display loading state.

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

Copy

# Different Sizes

Button component provides three sizes besides default size for different scenarios.

Default

Medium

Small

Mini

Micro

Default

Medium

Small

Mini

Micro

Additional sizes: medium, small, mini, configured by size attribute.

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

Copy

← Component Overview Radio→