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

The service is available with the useToast function for Composition API or using the $toast property of the application for Options 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 that defines properties such as severity, summary and detail.


<Toast />
<Button label="Show" @click="show()" />

Severity #

The severity option specifies the type of the message.


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

Position #

A message can be targeted to a certain Toast component by matching the group keys whereas location is customized with the position.


<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />

<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
<Button label="Bottom Right" severity="help" @click="showBottomRight" />

Multiple #

Multiple messages are displayed by passing an array to the show method.


<Toast />
<Button label="Multiple" severity="warning" @click="showMultiple()" />

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" />
<Button label="Clear" severity="secondary" @click="clear()" />

Template #

Custom content inside a message is defined with the content template.


<Toast position="bottom-center" group="bc" @close="onClose">
    <template #message="slotProps">
        <div class="flex flex-column align-items-start" style="flex: 1">
            <div class="flex align-items-center gap-2">
                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
                <span class="font-bold text-900">Amy Elsner</span>
            </div>
            <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
            <Button class="p-button-sm" label="Reply" @click="onReply()"></Button>
        </div>
    </template>
</Toast>
<Button @click="showTemplate" label="View" />

Headless #

Headless mode is enabled by defining a container slot that lets you implement entire toast UI instead of the default elements.


<Toast position="top-center" group="headless" @close="visible = false">
    <template #container="{ message, closeCallback }">
        <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
            <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
            <div class="flex flex-column gap-3 w-full">
                <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
                <p class="m-0 text-base text-700">{{ message.detail }}</p>
                <div class="flex flex-column gap-2">
                    <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
                    <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                </div>
                <div class="flex gap-3 mb-3">
                    <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
                    <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
                </div>
            </div>
        </section>
    </template>
</Toast>
<Button @click="show" label="View" />

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.