vant/src/button

Button

Intro

Buttons are used to trigger an action, such as submitting a form.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

Usage

Type

<van-button type="primary">Primary</van-button>
<van-button type="success">Success</van-button>
<van-button type="default">Default</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="warning">Warning</van-button>

Plain

<van-button plain type="primary">Primary</van-button>
<van-button plain type="primary">Danger</van-button>

Hairline

<van-button plain hairline type="primary">Hairline</van-button>
<van-button plain hairline type="primary">Hairline</van-button>

Disabled

<van-button disabled type="primary">Diabled</van-button>
<van-button disabled type="primary">Diabled</van-button>

Loading

<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="primary" loading-text="Loading..." />

Shape

<van-button square type="primary">Square</van-button>
<van-button round type="primary">Round</van-button>

Icon

<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="primary">
  Button
</van-button>

Size

<van-button type="primary" size="large">Large</van-button>
<van-button type="primary" size="normal">Normal</van-button>
<van-button type="primary" size="small">Small</van-button>
<van-button type="primary" size="mini">Mini</van-button>

Block Element

<van-button type="primary" block>Block Element</van-button>

Route

<van-button type="primary" url="/vant/mobile.html">URL</van-button>
<van-button type="primary" to="index">Vue Router</van-button>

Custom Color

<van-button color="#7232dd">Pure</van-button>
<van-button color="#7232dd" plain>Pure</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
  Gradient
</van-button>

API

Props

Attribute	Description	Type	Default
type	Can be set to primary success warning danger	string	default
size	Can be set to large small mini	string	normal
text	Text	string	-
color	Color, support linear-gradient	string	-
icon	Left Icon	string	-
icon-prefix	Icon className prefix	string	van-icon
icon-position	Icon position, can be set to right	string	left
tag	HTML Tag	string	button
native-type	Native Type Attribute	string	button
plain	Whether to be plain button	boolean	false
block	Whether to set display block	boolean	false
round	Whether to be round button	boolean	false
square	Whether to be square button	boolean	false
disabled	Whether to disable button	boolean	false
loading	Whether show loading status	boolean	false
loading-text	Loading text	string	-
loading-type	Loading type, can be set to spinner	string	circular
loading-size	Loading icon size	string	20px
url	Link URL	string	-
to	Target route of the link, same as using vue-router	string | object	-
replace	If true, the navigation will not leave a history record	boolean	false

Events

Event	Description	Arguments
click	Emitted when button is clicked and not disabled or loading	event: MouseEvent
touchstart	Emitted when button is touched	event: TouchEvent

Slots

Name	Description
default	Default slot
icon v3.0.18	Custom icon
loading	Custom loading icon

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@button-mini-height	24px	-
@button-mini-padding	0 @padding-base	-
@button-mini-font-size	@font-size-xs	-
@button-small-height	32px	-
@button-small-padding	0 @padding-xs	-
@button-small-font-size	@font-size-sm	-
@button-normal-font-size	@font-size-md	-
@button-normal-padding	0 15px	-
@button-large-height	50px	-
@button-default-height	44px	-
@button-default-line-height	1.2	-
@button-default-font-size	@font-size-lg	-
@button-default-color	@text-color	-
@button-default-background-color	@white	-
@button-default-border-color	@border-color	-
@button-primary-color	@white	-
@button-primary-background-color	@blue	-
@button-primary-border-color	@blue	-
@button-success-color	@white	-
@button-success-background-color	@green	-
@button-success-border-color	@green	-
@button-danger-color	@white	-
@button-danger-background-color	@red	-
@button-danger-border-color	@red	-
@button-warning-color	@white	-
@button-warning-background-color	@orange	-
@button-warning-border-color	@orange	-
@button-border-width	@border-width-base	-
@button-border-radius	@border-radius-sm	-
@button-round-border-radius	@border-radius-max	-
@button-plain-background-color	@white	-
@button-disabled-opacity	@disabled-opacity	-
@button-icon-size	1.2em	-
@button-loading-icon-size	20px	-