vant/src/button/README.md

Button

Install

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

Vue.use(Button);

Usage

Type

<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="info">Info</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="info">Danger</van-button>

Hairline

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

Disabled

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

Loading

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

Shape

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

Icon

<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">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>

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">Custom Color</van-button>
<van-button color="#7232dd" plain>Custom Color</van-button>

API

Props

Attribute	Description	Type	Default	Version
type	Can be set to primary info warning danger	string	default	-
size	Can be set to large small mini	string	normal	-
text	Text	string	-	-
color	Color, support linear-gradient	string	-	2.1.3
icon	Left Icon	string	-	-
tag	HTML Tag	string	button	-
native-type	Native Type Attribute	string	''	-
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 to of vue-router	string | object	-	-
replace	If true, the navigation will not leave a history record	boolean	false	-

Events

Event	Description	Arguments
click	Triggered when click button and not disabled or loading	event: Event
touchstart	Triggered when touch start	event: TouchEvent