docs_vue2/one/docs/en-US/components/button.md

Button

Demos

Stylistic variants

Available style variants for the ui prop: primary / strong / translucent / text / icon.

Size variants

Available size variants for the ui prop: xs / s / m / l / xl.

Disabled state

Use the disabled prop to set a button to disabled state.

Loading state

Use the loading prop to set a button to loading state (which will not respond upon clicks).

API

Props

Name	Type	Default	Description
ui	string=	-	[^ui]
disabled	boolean=	false	Whether the button is disabled.
type	string=	'button'	[^type]
loading	boolean=	false	Whether the button is in loading state. Loading buttons won't respond to user interactions.

^^^ui Style variants. A space-separated list of enum values.

+++Enum values

Value	Description
normal	Normal button. Default style.
primary	Primary button.
basic	Basic button.
strong	Strong button. Can be used alone or together with text / icon.
translucent	Translucent button, typically used on dark background.
text	Text button.
icon	Icon button.
aux	Auxilary button. Need to be used with text / icon styles.
square	Square button. Can be used with other styles.
xs	Extra small.
s	Small.
m	Medium.
l	Large.
xl	Extra large.
+++
^^^

^^^type The type of the button. See the type attribute of HTML's native <button> element.

+++Enum

Value	Description
button	Normal button.
submit	Submit button. Will cause an ancestor form to be submitted upon clicks.
reset	Reset button. Will reset all fields to initial value upon clicks.
+++

:::warning Note that the default value is different from the native <button> element. You need to explicitly set type to submit if you want to trigger a form submit. ::: ^^^

Slots

Name	Description
default	Content of the button.

Events

Additionally, Button exposes all native events available for native <button> element. The callback parameter is the corresponding native event object for all events.

Icons

Name	Description
loading	The loading spinner.