Toast

Toast is used to display messages in an overlay.

Import #


import { ToastModule } from 'primeng/toast';

Basic #

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

Severity #

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" 
    (onClick)="showSuccess()" 
    label="Success" 
    severity="success" />
<p-button 
    type="button"
    (onClick)="showInfo()" 
    label="Info" 
    severity="info" />
<p-button 
    type="button" 
    (onClick)="showWarn()" 
    label="Warn" 
    severity="warning" />
<p-button 
    type="button" 
    (onClick)="showError()" 
    label="Error" 
    severity="danger" />
<p-button 
    type="button" 
    (onClick)="showSecondary()" 
    label="Secondary" 
    severity="secondary" />
<p-button 
    type="button" 
    (onClick)="showContrast()" 
    label="Contrast" 
    severity="contrast" />

Position #

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 
    (onClick)="showTopLeft()" 
    label="Top Left" />
<p-button 
    (onClick)="showBottomLeft()" 
    label="Bottom Left" 
    severity="warning" />
<p-button 
    (onClick)="showBottomRight()" 
    label="Bottom Right" 
    severity="help" />

Multiple #

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


<p-toast />
<p-button
    (onClick)="show()" 
    label="Multiple" 
    severity="warning" />

Target #

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 key="toast2" />
<p-button
    (onClick)="showToast1()" 
    label="Show Success" />
<p-button
    (onClick)="showToast2()" 
    label="Show Warning" 
    severity="warning" />

Life #

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-button 
    (onClick)="showLife()" 
    label="Show Life" />
<p-button 
    (onClick)="showLifeLong()" 
    label="Show Life Long" />

Clear #

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 key="myKey" />
<p-button 
    (onClick)="show()" 
    label="Show" />
<p-button 
    (onClick)="clear()" 
    label="Clear" 
    severity="secondary" />

Sticky #

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
        (onClick)="show()" 
        severity="success" 
        label="Sticky" />
    <p-button
        (onClick)="clear()" 
        label="Clear" />
</div>

Templating #

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 align-items-start" style="flex: 1">
                <div class="flex align-items-center gap-2">
                    <p-avatar 
                        image="https://primefaces.org/cdn/primeng/images/demo/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">
                    {{ message.summary }}
                </div>
                <p-button size="small" label="Reply" (onClick)="onConfirm()" />
            </div>
        </ng-template>
</p-toast>
<p-button (onClick)="showConfirm()" label="View" />

Headless #

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 pTemplate="headless" let-closeFn="closeFn">
            <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">
                        <p-progressBar 
                            [value]="progress" 
                            [showValue]="false" 
                            [style]="{ height: '4px' }" />
                        <label class="text-right text-xs text-white">
                            {{ progress }}% uploaded...
                        </label>
                    </div>
                    <div class="flex gap-3 mb-3">
                        <p-button 
                            label="Another Upload?" 
                            [text]="true"
                            styleClass="p-0" 
                            (onClick)="closeFn($event)" />
                        <p-button 
                            label="Cancel" 
                            [text]="true"
                            styleClass="text-white p-0" 
                            (onClick)="closeFn($event)" />
                    </div>
                </div>
            </section>
        </ng-template>
</p-toast>
<p-button (onClick)="showConfirm()" label="Confirm" />

Responsive #

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 (onClick)="show()" label="Show" />

Animation #

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 (onClick)="show()" label="Show" />

Style #

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.

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.

Close Button Keyboard Support

Key	Function
enter	Closes the message.
space	Closes the message.

Toast API

API defines helper props, events and others for the PrimeNG Toast module.

Toast #

Toast is used to display messages in an overlay.

Properties #

Defines the input properties of the component.

name	type	default	description
key	string	null	Key of the message in case message is targeted to a specific toast component.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
life	number	3000	The default time to display messages for in milliseconds.
style	Object	null	Inline style of the component.
styleClass	string	null	Inline class of the component.
position	ToastPositionType	null	Position of the toast in viewport.
preventOpenDuplicates	boolean	false	It does not add the new message if there is already a toast displayed with the same content
preventDuplicates	boolean	false	Displays only once a message with the same content.
showTransformOptions	string	translateY(100%)	Transform options of the show animation.
hideTransformOptions	string	translateY(-100%)	Transform options of the hide animation.
showTransitionOptions	string	300ms ease-out	Transition options of the show animation.
hideTransitionOptions	string	250ms ease-in	Transition options of the hide animation.
breakpoints	Object	null	Object literal to define styles per screen size.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onClose	event : ToastCloseEvent	Callback to invoke when a message is closed.

Templates #

Defines the templates used by the component.

name	parameters	description
message	context : { $implicit: any, // Data of the message. }	Custom template of message.
headless	context : { $implicit: any, // Data of the message. }	Headless template.

Events #

Defines the custom events used by the component's emitters.

ToastCloseEvent #

Custom close event.

name	type	description
message	Message	Message of the closed element.

Message #

No description available

Properties #

Defines the input properties of the component.

name	type	default	description
severity	string	null	Severity level of the message.
text	string	null	Text content.
escape	boolean	true	Whether displaying messages would be escaped or not.
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.

Interfaces #

Defines the custom interfaces used by the module.

Message #

Deines valid options for the message.

name	type	description
severity	string
summary	string
detail	string
id	any
key	string
life	number
sticky	boolean
closable	boolean
data	any
icon	string
contentStyleClass	string
styleClass	string
closeIcon	string

MessageService #

Defines the service used by the component

Methods #

Methods used in service.

name	parameters	description
add	message : Message	Inserts single message.
addAll	messages : Message	Inserts new messages.
clear	key : string	Clears the message with the given key.