Toast

Toast is used to display messages in an overlay.

Import #


import Toast from 'primevue/toast';

Toast Service #

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();

Basic #

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()" />

Severity #

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>

Position #

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 #

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>

Sticky #

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" />

Template #

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" />

Style #

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.

Accessibility #

Screen Reader

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.

Close Button Keyboard Support

Key	Function
enter	Closes the message.
space	Closes the message.