Appearance

Toast ​

An alert-shaped component that displays a short message to the user.

INFO

The Toast component is not intended to be used directly. In order to display toast notifications, refer to the Toasts guide.

Basic usage ​

template
<Toast text="Hello" />

Variants ​

The Toast component supports multiple variants by passing a status property.

template
<Toast text="Success" status="success" />
<Toast text="Error" status="error" />
<Toast text="Warning" status="warning" />
<Toast text="Info" status="info" />

Advanced usage ​

To display a more complex structured content such as a rich text, you can pass down a render function or a template string as the content of the toast.

vue
<template>
  <strong>New Notification</strong><br />
  <strong>[Seller]</strong> has <strong>accepted</strong> the <a>order 1234</a>
</template>
vue
<Toast :text="() => h(MyToastContent)" status="success"></Toast>

See this section for more information on how to provide HTML content to the toast using useToast composable.

Custom offset ​

A custom offset can be set for the toast to change the distance from the top of the viewport by passing the offsetTop prop.

template
<Toast offset-top="10px" text="Hello!" />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.