import{o as s,a,y as n}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},d=n(`

Button

Intro

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

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">Plain</van-button>
<van-button plain type="success">Plain</van-button>

Hairline

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

Disabled

<van-button disabled type="primary">Disabled</van-button>
<van-button disabled type="success">Disabled</van-button>

Loading

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

Shape

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

Icon

<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">Button</van-button>
<van-button
  icon="https://fastly.jsdelivr.net/npm/@vant/assets/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="https://github.com">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 to 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	number \| 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

Types

The component exports the following type definitions:

import type {
  ButtonType,
  ButtonSize,
  ButtonProps,
  ButtonNativeType,
  ButtonIconPosition,
} from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

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

`,22),e=[d],h={__name:"README",setup(p,{expose:t}){return t({frontmatter:{}}),(r,c)=>(s(),a("div",l,e))}};export{h as default};