/*! For license information please see 7858.af0248af.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["7858"],{66112:function(n,t,s){"use strict";s.r(t);var a=s("80681");let l=["innerHTML"];t.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Button

\n

Intro

\n

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

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Button } from 'vant';\n\nconst app = createApp();\napp.use(Button);\n
\n

Usage

\n

Type

\n

The Button supports five types: default, primary, success, warning, and danger. The default type is default.

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

Plain

\n

Use the plain prop to set the button as a plain button. The text color of a plain button is the same as the button color, and the background is white.

\n
<van-button plain type="primary">Plain</van-button>\n<van-button plain type="success">Plain</van-button>\n
\n

Hairline

\n

Setting the hairline prop to display a border with a thickness of 0.5px.

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

Disabled

\n

Use the disabled prop to disable the button. In the disabled state, the button cannot be clicked.

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

Loading

\n

Set the button as a loading state using the loading prop. In the loading state, the button text is hidden by default. You can set the text for the loading state using the loading-text property.

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

Shape

\n

Use the square prop to set the button as square-shaped and the round prop to set it as round-shaped.

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

Icon

\n

Use the icon prop to set the button icon. It supports all icons from the Icon component or you can pass a custom icon URL.

\n
<van-button icon="plus" type="primary" />\n<van-button icon="plus" type="primary">Button</van-button>\n<van-button\n  icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"\n  type="primary"\n>\n  Button\n</van-button>\n
\n

Size

\n

Four sizes are supported: large, normal, small, and mini. The default size is normal.

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

Block Element

\n

By default, the button is an inline-block element. Use the block prop to change the button element type to a block-level element.

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

Route

\n

You can use the url prop for URL redirection or the to prop for route navigation.

\n
<van-button type="primary" url="https://github.com">URL</van-button>\n<van-button type="primary" to="index">Vue Router</van-button>\n
\n

Custom Color

\n

Customize the button color using the color prop.

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

Animated Button

\n

With the combination of the Button and Swipe component, you can create an animated button effect with vertical scrolling.

\n
<van-button type="danger" round>\n  <van-swipe\n    vertical\n    class="notice-swipe"\n    :autoplay="2000"\n    :touchable="false"\n    :show-indicators="false"\n  >\n    <van-swipe-item>Do Task</van-swipe-item>\n    <van-swipe-item>Lottery</van-swipe-item>\n  </van-swipe>\n</van-button>\n\n<style>\n  .notice-swipe {\n    height: 40px;\n    line-height: 40px;\n  }\n</style>\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
typeCan be set to primary success warning dangerstringdefault
sizeCan be set to large small ministringnormal
textTextstring-
colorColor, support linear-gradientstring-
iconLeft Iconstring-
icon-prefixIcon className prefixstringvan-icon
icon-positionIcon position, can be set to rightstringleft
tagHTML Tagstringbutton
native-typeNative Type Attributestringbutton
plainWhether to be plain buttonbooleanfalse
blockWhether to set display blockbooleanfalse
roundWhether to be round buttonbooleanfalse
squareWhether to be square buttonbooleanfalse
disabledWhether to disable buttonbooleanfalse
loadingWhether to show loading statusbooleanfalse
loading-textLoading textstring-
loading-typeLoading type, can be set to spinnerstringcircular
loading-sizeLoading icon sizenumber | string20px
urlLink URLstring-
toThe target route should navigate to when clicked on, same as the to prop of Vue Routerstring | object-
replaceIf true, the navigation will not leave a history recordbooleanfalse
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when button is clicked and not disabled or loadingevent: MouseEvent
touchstartEmitted when button is touchedevent: TouchEvent
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultDefault slot
iconCustom icon
loadingCustom loading icon
\n

Types

\n

The component exports the following type definitions:

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

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-button-mini-height24px-
--van-button-mini-padding0 var(--van-padding-base)-
--van-button-mini-font-sizevar(--van-font-size-xs)-
--van-button-small-height32px-
--van-button-small-padding0 var(--van-padding-xs)-
--van-button-small-font-sizevar(--van-font-size-sm)-
--van-button-normal-font-sizevar(--van-font-size-md)-
--van-button-normal-padding0 15px-
--van-button-large-height50px-
--van-button-default-height44px-
--van-button-default-line-height1.2-
--van-button-default-font-sizevar(--van-font-size-lg)-
--van-button-default-colorvar(--van-text-color)-
--van-button-default-backgroundvar(--van-background-2)-
--van-button-default-border-colorvar(--van-gray-4)-
--van-button-primary-colorvar(--van-white)-
--van-button-primary-backgroundvar(--van-primary-color)-
--van-button-primary-border-colorvar(--van-primary-color)-
--van-button-success-colorvar(--van-white)-
--van-button-success-backgroundvar(--van-success-color)-
--van-button-success-border-colorvar(--van-success-color)-
--van-button-danger-colorvar(--van-white)-
--van-button-danger-backgroundvar(--van-danger-color)-
--van-button-danger-border-colorvar(--van-danger-color)-
--van-button-warning-colorvar(--van-white)-
--van-button-warning-backgroundvar(--van-warning-color)-
--van-button-warning-border-colorvar(--van-warning-color)-
--van-button-border-widthvar(--van-border-width)-
--van-button-radiusvar(--van-radius-md)-
--van-button-round-radiusvar(--van-radius-max)-
--van-button-plain-backgroundvar(--van-white)-
--van-button-disabled-opacityvar(--van-disabled-opacity)-
--van-button-icon-size1.2em-
--van-button-loading-icon-size20px-
\n
'},null,8,l))}}}]);