Button
Install
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 v2.6.0 |
Icon className prefix |
string |
van-icon |
icon-position v2.10.7 |
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: Event |
| touchstart |
Emitted when button is touched |
event: TouchEvent |
Slots
| Name |
Description |
| default |
Default slot |
loading v2.10.1 |
Custom loading icon |
Less Variables
How to use: Custom Theme.
| Name |
Default Value |
Description |
| @button-mini-height |
24px |
- |
| @button-mini-font-size |
@font-size-xs |
- |
| @button-small-height |
32px |
- |
| @button-small-font-size |
@font-size-sm |
- |
| @button-normal-font-size |
@font-size-md |
- |
| @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 |
- |
