Button

Demo

Install

import React from 'react';
import { Button } from 'vant-react';

Usage

Type

<Button type="default">Default</Button>
<Button type="primary">Primary</Button>
<Button type="info">Info</Button>
<Button type="danger">Danger</Button>
<Button type="warning">Warning</Button>

Plain

<Button plain type="primary">Primary</Button
<Button plain type="danger">Danger</Button>

Hairline

<Button hairline type="primary">Primary</Button
<Button hairline type="danger">Danger</Button>

Disable

<Button disabled type="primary">Diabled</Button>
<Button disabled type="info">Diabled</Button>

Loading

<Button loading type="primary" />
<Button loading type="primary" loadingType="spinner" />
<Button loading type="info" loadingText="Loading..." />

Shape

<Button square type="primary">Square</Button>
<Button round type="info">Round</Button>

Custom Color

<Button color="FFECB3">Pure</Button
<Button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</Button>
<Button color="00796B" plain>Pure</Button>
<Button color="00796B" fontColor="#eee" plain>Plain</Button>

Tags

<Button tag="a">A Tag</Button>
<Button tag="button">Button Tag</Button>

Native Type

<Button nativeType="button">Button Type</Button>
<Button nativeType="reset">Reset Type</Button>
<Button nativeType="submit">Submit Type</Button>

Block

<Button>Non Block Button</Button>
<Button block>Block Button</Button>

Icon

<Button icon="https://img.yzcdn.cn/vant/logo.png">Custom Icon Button</Button>

Action

<Button click={(e) => alert(e.target)}>Handle Click</Button>
<Button touchstart={(e) => alert(e.target)}>Handle Touchstart</Button>

URL

<Button tag="a" replace url="https://github.com/mxdi9i7/vant-react">Open URL in Same Frame</Button>
<Button tag="a" url="https://github.com/mxdi9i7/vant-react">Open URL in New Tab</Button>

API

Props

Attribute	Description	Type	Default	Required
type	Can be set to primary info warning danger	string	default	optional
text	Text to be displayed in button	string	-	optional
color	Color, in hex value:a9s7dn, in gradient value:linear-gradient(to right, #4bb0ff, #6149f6),in rgb: rgb(210,210,210)	string	-	optional
fontColor	Css Color	string	-	optional
icon	Button icon that appears on the left	string	-	optional
tag	HTML Tag	string	-	optional
nativeType	Native Type Attribute	string	' '	optional
plain	Whether to be plain button	boolean	false	optional
round	Whether to be round button	boolean	false	optional
square	Whether to be square button	boolean	false	optional
disabled	Whether to disable button	boolean	false	optional
loading	Whether to show loading status	boolean	false	optional
loadingText	Loading text	string	-	optional
loadingType	Loading type, can be set tospinner	string	circular	optional
url	Link URL	string	-	optional
replace	Whether open in current tab	boolean	false	optional

Event

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