Toast

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

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 toasts are displayed by passing an array to the showAll method of the messageService.


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

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

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

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

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

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

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

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

NameElement
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

KeyFunction
enterCloses the message.
spaceCloses the message.