Toast is used to display messages in an overlay.

import { ToastModule } from 'primeng/toast';

Toasts are displayed by calling the add and addAll method provided by the messageService. A single toast is specified by the Message interface that defines various properties such as severity, summary and detail.

<button type="button" pButton pRipple (click)="show()" label="Show" class="p-button-success"></button>

The severity option specifies the type of the message. There are four types of messages: success, info, warn and error. The severity of the message is used to display the icon and the color of the toast.

<button type="button" pButton pRipple (click)="showSuccess()" label="Success" class="p-button-success"></button>
<button type="button" pButton pRipple (click)="showInfo()" label="Info" class="p-button-info"></button>
<button type="button" pButton pRipple (click)="showWarn()" label="Warn" class="p-button-warning"></button>
<button type="button" pButton pRipple (click)="showError()" label="Error" class="p-button-danger"></button>

Location of the toast is customized with the position property. Valid values are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right and center.

<p-toast position="top-left" key="tl"></p-toast>
<p-toast position="top-center" key="tc"></p-toast>
<p-toast position="bottom-center" key="bc"></p-toast>
<button type="button" pButton pRipple (click)="showTopLeft()" label="Top Left"></button>
<button type="button" pButton pRipple (click)="showTopCenter()" label="Top Center" class="p-button-warning"></button>
<button type="button" pButton pRipple (click)="showBottomCenter()" label="Bottom Center" class="p-button-success"></button>

Multiple toasts are displayed by passing an array to the showAll method of the messageService.

<button type="button" pButton pRipple (click)="show()" label="Multiple"></button>

A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the key property so that toast and the message can match.

<p-toast key="toast1"></p-toast>
<p-toast key="toast2"></p-toast>
<button type="button" pButton pRipple (click)="showToast1()" label="Show Success"></button>
<button type="button" pButton pRipple (click)="showToast2()" label="Show Warning" class="p-button-success"></button>

A toast disappears after 3000ms by default, set the life option on either the message or toast to override this.

<p-toast [life]="10000"></p-toast>
<button type="button" pButton pRipple (click)="showLife()" label="Show Life Default"></button>
<button type="button" pButton pRipple (click)="showLifeLong()" label="Show Life Long"></button>

Clicking the close icon on the toast, removes it manually. Same can also be achieved programmatically using the clear function of the messageService. Calling it without any arguments, removes all displayed messages whereas calling it with a key, removes the messages displayed on a toast having the same key.

<button type="button" pButton pRipple (click)="show()" label="Show"></button>
<button type="button" pButton pRipple (click)="clear()" label="Clear" class="p-button-secondary"></button>

A toast disappears after the time defined by the life option, set sticky option true on the message to override this and not hide the toast automatically.

<div class="flex flex-wrap gap-2">
    <button type="button" pButton pRipple (click)="show()" class="p-button-success" label="Show Sticky"></button>
    <button type="button" pButton pRipple (click)="clear()" label="Clear"></button>

Templating allows customizing the content where the message instance is available as the implicit variable.

<p-toast position="bottom-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
<ng-template let-message pTemplate="message">
    <div class="flex flex-column" style="flex: 1">
        <div class="text-center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
        <div class="grid p-fluid">
            <div class="col-6">
                <button type="button" pButton (click)="onConfirm()" label="Yes" class="p-button-success"></button>
            <div class="col-6">
                <button type="button" pButton (click)="onReject()" label="No" class="p-button-secondary"></button>
<button type="button" pButton pRipple (click)="showConfirm()" label="Confirm"></button>

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.

<p-toast [breakpoints]="{'920px': {width: '100%', right: '0', left: '0'}}"></p-toast>
<button type="button" pButton pRipple (click)="show()" label="Show"></button>

Transition of the animations can be customized using the showTransitionOptions, hideTransitionOptions, showTransformOptions and hideTransformOptions properties.

<p-toast [showTransformOptions]="'translateY(100%)'" [showTransitionOptions]="'1000ms'" [hideTransitionOptions]="'1000ms'" [showTransformOptions]="'translateX(100%)'"></p-toast>
<button type="button" pButton pRipple (click)="show()" label="Show"></button>

Following is the list of structural style classes, for theming classes visit theming page.

p-toastMain container element.
p-toast-messageContainer of a message item.
p-toast-icon-closeClose icon of a message.
p-toast-iconSeverity icon.
p-toast-message-contentContainer of message texts.
p-toast-summarySummary of the message.
p-toast-detailDetail of the message.

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.

Close Button Keyboard Support

enterCloses the message.
spaceCloses the message.