Toast is used to display messages in an overlay.
import { Toast } 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.
<p-toast />
<p-button (onClick)="show()" label="Show" />
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.
<p-toast />
<p-button type="button" pRipple (click)="showSuccess()" label="Success" severity="success" />
<p-button type="button" pRipple (click)="showInfo()" label="Info" severity="info" />
<p-button type="button" pRipple (click)="showWarn()" label="Warn" severity="warn" />
<p-button type="button" pRipple (click)="showError()" label="Error" severity="danger" />
<p-button type="button" pRipple (click)="showSecondary()" label="Secondary" severity="secondary" />
<p-button type="button" pRipple (click)="showContrast()" label="Contrast" severity="contrast" />
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 position="bottom-left" key="bl" />
<p-toast position="bottom-right" key="br" />
<p-button pRipple (click)="showTopLeft()" label="Top Left" />
<p-button pRipple (click)="showBottomLeft()" label="Bottom Left" />
<p-button pRipple (click)="showBottomRight()" label="Bottom Right" />
Multiple toasts are displayed by passing an array to the showAll method of the messageService.
<p-toast />
<p-button pRipple (click)="show()" label="Multiple" severity="warning" />
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.
<p-toast />
<div class="flex flex-wrap gap-2">
<p-button pRipple (click)="show()" label="Sticky" />
<p-button pRipple (click)="clear()" label="Clear" severity="secondary" />
</div>
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 #message>
<div class="flex flex-col items-start flex-auto">
<div class="flex items-center gap-2">
<p-avatar
image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
shape="circle" />
<span class="font-bold">
Amy Elsner
</span>
</div>
<div class="font-medium text-lg my-4">
{{ message.summary }}
</div>
<p-button severity="success" size="small" label="Reply" (click)="onConfirm()" />
</div>
</ng-template>
</p-toast>
<p-button (click)="showConfirm()" label="View" />
Headless mode allows you to customize the entire user interface instead of the default elements.
<p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
<ng-template let-message #headless let-closeFn="closeFn">
<section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
<div class="flex items-center gap-5">
<i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
<span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
</div>
<div class="flex flex-col gap-2">
<p-progressbar
[value]="progress"
[showValue]="false"
[style]="{ height: '4px' }"
styleClass="!bg-primary/80"
/>
<label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
</div>
<div class="flex gap-4 mb-4 justify-end">
<p-button label="Another Upload?" (click)="closeFn($event)" size="small" />
<p-button label="Cancel" (click)="closeFn($event)" size="small" />
</div>
</section>
</ng-template>
</p-toast>
<p-button (click)="showConfirm()" label="Confirm" />
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-button (click)="show()" label="Show" />
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-button pRipple (click)="show()" label="Show" />
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.
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |