# Button

Commonly used operation buttons.

# Basic usage

Basic button usage.

Use the typeplainroundcircle properties to define the style of the Button .
    <ve-button plain>Plain button</ve-button>
    <ve-button plain type="success">Success button</ve-button>
    <ve-button plain type="primary">Main button</ve-button>
    <ve-button plain type="warning">Warning button</ve-button>
    <ve-button plain type="error">Danger button</ve-button>
  <div style="margin-top: 12px">
    <ve-button type="success">Success button</ve-button>
    <ve-button type="primary">Main button</ve-button>
    <ve-button type="warning">Warning button</ve-button>
    <ve-button type="error">Danger button</ve-button>
  <div style="margin-top: 12px">
    <ve-button icon="asterisk" circle></ve-button>
    <ve-button type="success" icon="circle" circle></ve-button>
    <ve-button type="primary" icon="shopping-cart" circle></ve-button>
    <ve-button type="warning" icon="table" circle></ve-button>
    <ve-button type="error" icon="compress" circle></ve-button>

# Button size

Extra sizes: large, small, configure them by setting the size attribute.
    <ve-button size="small" type="success">Success small</ve-button>
    <ve-button size="small" type="primary">Main small</ve-button>
    <ve-button size="small" type="warning">Warning small</ve-button>
    <ve-button size="small" type="error">Danger small</ve-button>
  <div style="margin-top: 12px">
    <ve-button type="success">Success default</ve-button>
    <ve-button type="primary">Main default</ve-button>
    <ve-button type="warning">Warning default</ve-button>
    <ve-button type="error">Danger default</ve-button>
  <div style="margin-top: 12px">
    <ve-button size="large" type="success">Success large</ve-button>
    <ve-button size="large" type="primary">Main large</ve-button>
    <ve-button size="large" type="warning">Warning large</ve-button>
    <ve-button size="large" type="error">Danger large</ve-button>

# Disabled state

The button is not available.

You can use the disabled property to define whether a button is available, which accepts a Boolean value.
    <ve-button plain disabled>Plain button</ve-button>
    <ve-button plain type="success" disabled>Success button</ve-button>
    <ve-button plain type="primary" disabled>Main button</ve-button>
    <ve-button plain type="warning" disabled>Warning button</ve-button>
    <ve-button plain type="error" disabled>Danger button</ve-button>
  <div style="margin-top: 12px">
    <ve-button disabled>Normal button</ve-button>
    <ve-button type="success" disabled>Success button</ve-button>
    <ve-button type="primary" disabled>Main button</ve-button>
    <ve-button type="warning" disabled>Warning button</ve-button>
    <ve-button type="error" disabled>Danger button</ve-button>
  <div style="margin-top: 12px">
    <ve-button icon="asterisk" circle disabled></ve-button>
    <ve-button type="success" icon="circle" circle disabled></ve-button>
    <ve-button type="primary" icon="shopping-cart" circle disabled></ve-button>
    <ve-button type="warning" icon="table" circle disabled></ve-button>
    <ve-button type="error" icon="compress" circle disabled></ve-button>

# Icon button

Use the icon property to define the icon for the Button . Available icon address
  <ve-button type="primary" icon="asterisk" rotate disabled>Button</ve-button>
  <ve-button type="primary" icon="circle"></ve-button>
  <ve-button type="primary" icon="shopping-cart"></ve-button>
  <ve-button type="primary" icon="compress"></ve-button>

# Text button

Change the value of the type attribute to text .
  <ve-button type="text">Button</ve-button>

# Round button rotation

Set the value of rotate . Note:only supports buttons with :circle="true"
  <ve-button icon="asterisk" circle rotate></ve-button>
  <ve-button type="primary" icon="circle" rotate circle></ve-button>

# Button animation

Set the mask to indicate the mask-type type
  <ve-button mask mask-type="primary">Main button</ve-button>
  <ve-button mask mask-type="success">Success button</ve-button>
  <ve-button mask mask-type="warning">Warning button</ve-button>
  <ve-button mask mask-type="error">Danger button</ve-button>

# Button Attributes

Parameter Description Type Optional value Defaults
type Button type string default / success / primary / warning / error default
native-type Native type attribute string button / submit / reset button
icon Button icon string fontawesome 5.6.3 None
disabled Whether to disable the button and make it unavailable boolean true / false false
circle Whether round button boolean true / false false
plain Whether plain button boolean true / false false
rotate Whether the icon rotates boolean true / false false
mask Whether to display mask animation boolean true / false false
mask-type Mask animation type string success / primary / warning / error primary
icon-style Set the icon icon style details string brands / regular / solid solid

# Button Events

Event name Event Description Callback parameter
click Mouse click event trigger (event: Event)