Intro

Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.

Install

import { createApp } from 'vue';
import { Toast } from 'vant';

const app = createApp();
app.use(Toast);

Text

Toast('Some messages');

Loading

Toast.loading({
  message: 'Loading...',
  forbidClick: true,
});

Success/Fail

Toast.success('Success');
Toast.fail('Fail');

Custom Icon

Toast({
  message: 'Custom Icon',
  icon: 'like-o',
});

Toast({
  message: 'Custom Image',
  icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
});

Toast.loading({
  message: 'Loading...',
  forbidClick: true,
  loadingType: 'spinner',
});

Custom Position

Toast({
  message: 'Top',
  position: 'top',
});

Toast({
  message: 'Bottom',
  position: 'bottom',
});

Update Message

const toast = Toast.loading({
  duration: 0,
  forbidClick: true,
  loadingType: 'spinner',
  message: '3 seconds',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.message = \`\${second} seconds\`;
  } else {
    clearInterval(timer);
    Toast.clear();
  }
}, 1000);

Global Method

After registering the Toast component through app.use, the $toast method will be automatically mounted on all subcomponents of the app.

export default {
  mounted() {
    this.$toast('Some messages');
  },
};

Singleton

Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example:

Toast.allowMultiple();

const toast1 = Toast('First Toast');
const toast2 = Toast.success('Second Toast');

toast1.clear();
toast2.clear();

Set Default Options

The Toast default configuration can be globally modified with the Toast.setDefaultOptions function.

Toast.setDefaultOptions({ duration: 2000 });

Toast.setDefaultOptions('loading', { forbidClick: true });

Toast.resetDefaultOptions();

Toast.resetDefaultOptions('loading');

Methods

Methods	Attribute	Return value	Description
Toast	`options \| message`	toast instance	Show toast
Toast.loading	`options \| message`	toast instance	Show loading toast
Toast.success	`options \| message`	toast instance	Show success toast
Toast.fail	`options \| message`	toast instance	Show fail toast
Toast.clear	`clearAll: boolean`	`void`	Close toast
Toast.allowMultiple	-	`void`	Allow multiple toast at the same time
Toast.setDefaultOptions	`type \| options`	`void`	Set default options of all toasts
Toast.resetDefaultOptions	`type`	`void`	Reset default options of all toasts

Options

Attribute	Description	Type	Default
type	Can be set to `loading` `success` `fail` `html`	ToastType	`text`
position	Can be set to `top` `middle` `bottom`	ToastPosition	`middle`
message	Message	string	`''`
icon	Custom icon	string	-
iconSize	Custom icon size	number \| string	`36px`
iconPrefix	Icon className prefix	string	`van-icon`
overlay	Whether to show overlay	boolean	`false`
forbidClick	Whether to forbid click background	boolean	`false`
closeOnClick	Whether to close after clicked	boolean	`false`
closeOnClickOverlay	Whether to close when overlay is clicked	boolean	`false`
loadingType	Loading icon type, can be set to `spinner`	string	`circular`
duration	Toast duration(ms), won't disappear if value is 0	number	`2000`
className	Custom className	string \| Array \| object	-
overlayClass `v3.0.4`	Custom overlay class	string \| Array \| object	-
overlayStyle `v3.0.4`	Custom overlay style	object	-
onOpened	Callback function after opened	Function	-
onClose	Callback function after close	Function	-
transition	Transition, equivalent to `name` prop of transition	string	`van-fade`
teleport	Specifies a target element where Toast will be mounted	string \| Element	`body`

Types

The component exports the following type definitions:

import type { ToastType, ToastProps, ToastOptions, ToastPosition } from 'vant';

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-toast-max-width	70%	-
--van-toast-font-size	var(--van-font-size-md)	-
--van-toast-text-color	var(--van-white)	-
--van-toast-loading-icon-color	var(--van-white)	-
--van-toast-line-height	var(--van-line-height-md)	-
--van-toast-border-radius	var(--van-border-radius-lg)	-
--van-toast-background-color	fade(var(--van-black), 70%)	-
--van-toast-icon-size	36px	-
--van-toast-text-min-width	96px	-
--van-toast-text-padding	var(--van-padding-xs) var(--van-padding-sm)	-
--van-toast-default-padding	var(--van-padding-md)	-
--van-toast-default-width	88px	-
--van-toast-default-min-height	88px	-
--van-toast-position-top-distance	20%	-
--van-toast-position-bottom-distance	20%	-

Toast