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.
<p-toast></p-toast>
<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.
<p-toast></p-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></p-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>
Multiple toasts are displayed by passing an array to the showAll method of the messageService.
<p-toast></p-toast>
<button type="button" pButton pRipple (click)="showMultiple()" label="Show 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 defined the life option, set sticky option true to display toast that do not hide automatically.
<p-toast></p-toast>
<button type="button" pButton pRipple (click)="showSticky()" label="Show Sticky"></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.
<p-toast></p-toast>
<button type="button" pButton pRipple (click)="show()" label="Show"></button>
<button type="button" pButton pRipple (click)="clear()" label="Clear" class="p-button-secondary"></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>
<h4>{{message.summary}}</h4>
<p>{{message.detail}}</p>
</div>
<div class="grid p-fluid">
<div class="col-6">
<button type="button" pButton (click)="onConfirm()" label="Yes" class="p-button-success"></button>
</div>
<div class="col-6">
<button type="button" pButton (click)="onReject()" label="No" class="p-button-secondary"></button>
</div>
</div>
</div>
</ng-template>
</p-toast>
<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.
| 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 locale API by default, you may usecloseButtonProps to customize the element and override the default aria-label.
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |
API defines helper props, events and others for the PrimeNG Toast module.
| Name | Type | Default | Description |
|---|---|---|---|
| severity | string | null | Severity level of the message, valid values are "success", "info", "warn" and "error". |
| summary | string | null | Summary text of the message. |
| detail | string | null | Detail text of the message. |
| id | any | null | Identifier of the message. |
| key | string | null | Key of the message in case message is targeted to a specific toast component. |
| life | number | 3000 | Number of time in milliseconds to wait before closing the message. |
| sticky | boolean | false | Whether the message should be automatically closed based on life property or kept visible. |
| closable | boolean | true | When enabled, displays a close icon to hide a message manually. |
| data | any | null | Arbitrary object to associate with the message. |
| styleClass | string | null | Style class of the message. |
| contentStyleClass | string | null | Style class of the content. |
| Name | Type | Default | Description |
|---|---|---|---|
| key | string | null | Key to match the key of a message to display. |
| icon | string | null | Icon of the message. |
| closeIcon | string | null | Icon of the close button. |
| style | string | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| position | string | top-right | Position of the component, valid values are "top-right", "top-left", "bottom-left", "bottom-right", "top-center, "bottom-center" and "center". |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| showTransitionOptions | string | 300ms ease-out | Transition options of the show animation. |
| hideTransitionOptions | string | 250ms ease-in | Transition options of the hide animation. |
| showTransformOptions | string | translateY(100%) | Transform options of the show animation. |
| hideTransformOptions | string | translateY(-100%) | Transform options of the hide animation. |
| preventOpenDuplicates | boolean | false | It does not add the new message if there is already a toast displayed with the same content |
| breakpoints | object | null | Object literal to define styles per screen size. |
| preventDuplicates | boolean | false | Displays only once a message with the same content. |
| Name | Parameters | Description |
|---|---|---|
| onClose | event.message: Removed message | Callback to invoke when a message is closed. |
| Name | Parameters |
|---|---|
| message | - |