# Button

Commonly used operation buttons.

# Basic usage

Basic button usage.

Use the type、plain、round 和 circle properties to define the style of the Button .

<template>
  <div>
    <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>
  <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>
  <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>
  </div>
</template>

# Button size

Extra sizes: large, small, configure them by setting the size attribute.

<template>
  <div>
    <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>
  <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>
  <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>
  </div>
</template>

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

<template>
  <div>
    <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>
  <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>
  <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>
  </div>
</template>

# Icon button

Use the icon property to define the icon for the Button . Available icon address

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

# Text button

Change the value of the type attribute to text .

<template>
  <ve-button type="text">Button</ve-button>
</template>

# Round button rotation

Set the value of rotate . Note：only supports buttons with :circle="true"

<template>
  <ve-button icon="asterisk" circle rotate></ve-button>
  <ve-button type="primary" icon="circle" rotate circle></ve-button>
</template>

# Button animation

Set the mask to indicate the mask-type type

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

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

← Icon Input →