Toast is used to display messages in an overlay.
import Toast from 'primevue/toast';
Toast component is controlled via the ToastService that needs to be installed as an application plugin.
import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';
const app = createApp(App);
app.use(ToastService);
$toast is available as a property in the application instance for Options API. The service can be injected with the useToast function for Composition API.
import { useToast } from 'primevue/usetoast';
const toast = useToast();
Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as severity, summary and detail.
<Toast />
<Button label="Show" @click="show()" />
The severity option specifies the type of the message.
<Toast />
<div class="flex flex-wrap gap-2">
<Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" severity="warning" @click="showWarn" />
<Button label="Error" severity="danger" @click="showError" />
</div>
Location of the messages is customized with the position property.
<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />
<div class="flex flex-wrap gap-2">
<Button label="Top Left" class="mr-2" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="success" @click="showBottomRight" />
</div>
Multiple messages are displayed by passing an array to the show method.
<Toast />
<div class="flex flex-wrap gap-2">
<Button label="Multiple" severity="warning" @click="showMultiple()" />
<Button label="Clear" @click="clear()" />
</div>
A message disappears after 3000ms defined the life option, set sticky option to display messages that do not hide automatically.
<Toast />
<Button @click="showSticky" label="Sticky" />
Custom content inside a message is defined with the content option.
<Toast position="bottom-center" group="bc">
<template #message="slotProps">
<div class="flex flex-column align-items-center" style="flex: 1">
<div class="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
</div>
<div class="flex gap-2">
<Button severity="success" label="Yes" @click="onConfirm()"></Button>
<Button severity="secondary" label="No" @click="onReject()"></Button>
</div>
</div>
</template>
</Toast>
<Button @click="showTemplate" label="Confirm" />
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-toast | Main container element. |
p-toast-message | Container of a message item. |
p-toast-icon-close | Close icon of a message. |
p-toast-icon | Severity icon. |
p-toast-message-content | Container of message texts. |
p-toast-summary | Summary of the message. |
p-toast-detail | Detail of the message. |
Toast component use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true".
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label.
Key | Function |
---|---|
enter | Closes the message. |
space | Closes the message. |