Toast messages are dynamically created using a ToastService that needs to be installed globally before the application instance is created.
import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';
const app = createApp(App);
app.use(ToastService);
import Toast from 'primevue/toast';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"></script>
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.
<template>
<Toast />
<template>
$toast is available as a property in the application instance.
export default {
mounted() {
this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
}
}
The toast instance can be injected with the useToast function.
import { defineComponent } from "vue";
import { useToast } from "primevue/usetoast";
export default defineComponent({
setup() {
const toast = useToast();
toast.add({severity:'info', summary: 'Info Message', detail:'Message Content', life: 3000});
}
})
| Name | Type | Default | Description |
|---|---|---|---|
| severity | string | null | Severity of the message. |
| summary | element | null | Summary content of the message. |
| detail | element | null | Detail content of the message. |
| closable | boolean | true | Whether the message can be closed manually using the close icon. |
| life | number | null | Delay in milliseconds to close the message automatically. Messages with no life defined becomes sticky. |
| group | string | null | Key of the Toast to display the message. |
| styleClass | string | null | Style class of the message. |
| contentStyleClass | string | null | Style class of the content. |
| Name | Parameters | Description |
|---|---|---|
| add | message: Message instance | Displays the message in a suitable Toast component. |
| removeGroup | group: Name of the message group | Clears the messages that belongs to the group. |
| removeAllGroup | - | Clears all the messages. |
There are four possible values for the severity of a message. Info is the default.
There are four positions available for the toast container defined by the position property that defaults to "top-right". Other valid values are "top-left", "top-center", "bottom-left", "bottom-center", "bottom-right" and "center".
<Toast />
<Toast position="top-left" />
<Toast position="top-center" />
<Toast position="top-right" />
<Toast position="center" />
<Toast position="bottom-left" />
<Toast position="bottom-center" />
<Toast position="bottom-right" />
A message can be targeted to a specific Toast component if their group properties match. Messages without a group are forwarded to the default Toast component that does not have a group defined.
<Toast />
<Toast position="mykey" />
this.$toast.add({severity:'success', summary: 'Default Message'});
this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'});
removeGroup(group) clears the messages for a specific Toast whereas removeAllGroups() method clears all messages.
Templating allows customizing the content where the message instance is available as the implicit variable.
<Toast position="bottom-center" group="bc">
<template #message="slotProps">
<div class="flex flex-column">
<div class="text-center">
<i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
<h4>{{slotProps.message.summary}}</h4>
<p>{{slotProps.message.detail}}</p>
</div>
<div class="grid p-fluid">
<div class="col-6">
<Button class="p-button-success" label="Yes" @click="onConfirm" />
</div>
<div class="col-6">
<Button class="p-button-secondary" label="No" @click="onReject" />
</div>
</div>
</div>
</template>
</Toast>
Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.
<Toast :breakpoints="{'920px': {width: '100%', right: '0', left: '0'}}"></Toast>
ToastSeverity constants API is provided to easily choose a severity of the message with typescript.
import {ToastSeverity} from 'primevue/api';
export default {
methods: {
showInfo() {
this.$toast.add({severity: ToastSeverity.INFO, summary: 'Info Message', detail:'Message Content', life: 3000});
}
}
}
| Name | Type | Default | Description |
|---|---|---|---|
| group | string | null | Unique identifier of a message group. |
| position | string | top-right | Position of the toast in viewport. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| breakpoints | object | null | Object literal to define styles per screen size. |
| closeIcon | string | pi pi-times | Icon to display in the toast close button. |
| infoIcon | string | pi pi-info-circle | Icon to display in the toast with info severity. |
| warnIcon | string | pi pi-exclamation-triangle | Icon to display in the toast with warn severity. |
| errorIcon | string | pi pi-times | Icon to display in the toast with error severity. |
| successIcon | string | pi pi-check | Icon to display in the toast with success severity. |
| closeButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the close button. |
| Name | Parameters |
|---|---|
| message | - |
Following is the list of structural style classes, for theming classes visit
| 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
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |
None.