Button - Vant 4
Button
🎯 Ready to make things happen with a click? Let's dive into the Button component!
Intro 📖
The heart of user interaction! Buttons are your gateway to action - whether it's submitting forms, navigating pages, or triggering any exciting functionality! 🚀 Click, tap, and make magic happen! ✨
Install 📦
Let's get clicking! Register the component globally via app.use - it's super easy! 🎯 Check out our Component Registration guide for more installation options.
import { createApp } from'vue'; import { Button } from'vant'; const app = createApp(); app.use(Button);Usage 🎮
Type 🎨
Express yourself with five amazing button types! Choose from default, primary, success, warning, and danger - each with its own personality and purpose! 🌈
Plain 🤍
Keep it simple and elegant! Use the plain prop for a minimalist look where the text color matches the button theme with a clean white background. Perfect for subtle actions! ✨
Hairline 📏
Precision matters! The hairline prop creates ultra-thin borders (0.5px) for that crisp, modern look. It's all about the details! 🔍
Disabled 🚫
Sometimes buttons need a break! Use the disabled prop to prevent clicks and give visual feedback that an action isn't available right now. 😴
Loading ⏳
Show users that something awesome is happening! The loading prop displays a spinning indicator while hiding the button text. Want custom loading text? Use loading-text to keep users informed! 🔄
Shape 🔲
Express your style! Choose square for that modern, geometric look or round for smooth, friendly vibes. Shape matters in design! 🎨
Icon 🎯
Add visual flair to your buttons! Use the icon prop to place icons on the left side, or switch it up with icon-position to move icons around. Icons speak louder than words! 🔥
Size 📏
Size it right for every occasion! Pick from large (bold statements), normal (everyday actions), small (compact spaces), or mini (tiny but mighty). Default is normal - the perfect balance! ⚖️
Block 📱
Take up the full stage! The block prop makes your button stretch to fill its parent's width - perfect for mobile interfaces and call-to-action buttons! 📏
Route 🧭
Navigate like a pro! Use url for simple redirects or to for Vue Router navigation. Your buttons can be gateways to anywhere! 🚀
Custom Color 🎨
Make it uniquely yours! Use the color prop to set any color you want - solid colors, gradients, you name it! Let your creativity shine through! 🌈
Animated Button 🎬
Bring your buttons to life! Combine Button with our Swipe component to create mesmerizing animated effects with smooth vertical scrolling. Motion makes magic! ✨
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* |
| url | Link URL | string | - |
| to | The target route should navigate to when clicked on, same as the to prop of 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 | Custom icon |
| loading | Custom loading icon |
Types
The component exports the following type definitions:
importtype { 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 | var(--van-background-2) | - |
| --van-button-default-border-color | var(--van-gray-4) | - |
| --van-button-primary-color | var(--van-white) | - |
| --van-button-primary-background | var(--van-primary-color) | - |
| --van-button-primary-border-color | var(--van-primary-color) | - |
| --van-button-success-color | var(--van-white) | - |
| --van-button-success-background | var(--van-success-color) | - |
| --van-button-success-border-color | var(--van-success-color) | - |
| --van-button-danger-color | var(--van-white) | - |
| --van-button-danger-background | var(--van-danger-color) | - |
| --van-button-danger-border-color | var(--van-danger-color) | - |
| --van-button-warning-color | var(--van-white) | - |
| --van-button-warning-background | var(--van-warning-color) | - |
| --van-button-warning-border-color | var(--van-warning-color) | - |
| --van-button-border-width | var(--van-border-width) | - |
| --van-button-radius | var(--van-radius-md) | - |
| --van-button-round-radius | var(--van-radius-max) | - |
| --van-button-plain-background | var(--van-white) | - |
| --van-button-disabled-opacity | var(--van-disabled-opacity) | - |
| --van-button-icon-size | 1.2em | - |
| --van-button-loading-icon-size | 20px | - |
Related Docs 📚
- Icon - Add visual elements to your buttons
- Loading - Show loading states
- Swipe - Create animated button effects
- Form - Use buttons in forms
- Dialog - Trigger dialogs with buttons
- ActionSheet - Alternative action triggers
- ConfigProvider - Global configuration
- Advanced Usage - Component registration guide