Toast

Toast is used to display messages in an overlay.

Import #


import { Toast } 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" 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" />

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 pRipple (click)="showTopLeft()" label="Top Left" />
<p-button pRipple (click)="showBottomLeft()" label="Bottom Left" />
<p-button pRipple (click)="showBottomRight()" label="Bottom Right" />

Multiple #

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

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

Template #

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 #

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

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

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.

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.

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.

name	type	description
text	any
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

class	description
p-toast	Class name of the root element
p-toast-message	Class name of the message element
p-toast-message-content	Class name of the message content element
p-toast-message-icon	Class name of the message icon element
p-toast-message-text	Class name of the message text element
p-toast-summary	Class name of the summary element
p-toast-detail	Class name of the detail element
p-toast-close-button	Class name of the close button element
p-toast-close-icon	Class name of the close icon element

token	variable	description
root.width	--p-toast-width	Width of root
root.borderRadius	--p-toast-border-radius	Border radius of root
root.borderWidth	--p-toast-border-width	Border width of root
root.transitionDuration	--p-toast-transition-duration	Transition duration of root
icon.size	--p-toast-icon-size	Size of icon
content.padding	--p-toast-content-padding	Padding of content
content.gap	--p-toast-content-gap	Gap of content
text.gap	--p-toast-text-gap	Gap of text
summary.fontWeight	--p-toast-summary-font-weight	Font weight of summary
summary.fontSize	--p-toast-summary-font-size	Font size of summary
detail.fontWeight	--p-toast-detail-font-weight	Font weight of detail
detail.fontSize	--p-toast-detail-font-size	Font size of detail
closeButton.width	--p-toast-close-button-width	Width of close button
closeButton.height	--p-toast-close-button-height	Height of close button
closeButton.borderRadius	--p-toast-close-button-border-radius	Border radius of close button
focusRing.width	--p-toast-close-button-focus-ring-width	Focus ring width of close button
focusRing.style	--p-toast-close-button-focus-ring-style	Focus ring style of close button
focusRing.offset	--p-toast-close-button-focus-ring-offset	Focus ring offset of close button
closeIcon.size	--p-toast-close-icon-size	Size of close icon
blur.0	--p-toast-blur-0	0 of blur
blur.1	--p-toast-blur-1	1 of blur
blur.2	--p-toast-blur-2	2 of blur
blur.3	--p-toast-blur-3	3 of blur
blur.4	--p-toast-blur-4	4 of blur
info.background	--p-toast-info-background	Background of info
info.borderColor	--p-toast-info-border-color	Border color of info
info.color	--p-toast-info-color	Color of info
info.detailColor	--p-toast-info-detail-color	Detail color of info
info.shadow	--p-toast-info-shadow	Shadow of info
closeButton.hoverBackground	--p-toast-info-close-button-hover-background	Close button hover background of info
focusRing.color	--p-toast-info-close-button-focus-ring-color	Close button focus ring color of info
focusRing.shadow	--p-toast-info-close-button-focus-ring-shadow	Close button focus ring shadow of info
success.background	--p-toast-success-background	Background of success
success.borderColor	--p-toast-success-border-color	Border color of success
success.color	--p-toast-success-color	Color of success
success.detailColor	--p-toast-success-detail-color	Detail color of success
success.shadow	--p-toast-success-shadow	Shadow of success
closeButton.hoverBackground	--p-toast-success-close-button-hover-background	Close button hover background of success
focusRing.color	--p-toast-success-close-button-focus-ring-color	Close button focus ring color of success
focusRing.shadow	--p-toast-success-close-button-focus-ring-shadow	Close button focus ring shadow of success
warn.background	--p-toast-warn-background	Background of warn
warn.borderColor	--p-toast-warn-border-color	Border color of warn
warn.color	--p-toast-warn-color	Color of warn
warn.detailColor	--p-toast-warn-detail-color	Detail color of warn
warn.shadow	--p-toast-warn-shadow	Shadow of warn
closeButton.hoverBackground	--p-toast-warn-close-button-hover-background	Close button hover background of warn
focusRing.color	--p-toast-warn-close-button-focus-ring-color	Close button focus ring color of warn
focusRing.shadow	--p-toast-warn-close-button-focus-ring-shadow	Close button focus ring shadow of warn
error.background	--p-toast-error-background	Background of error
error.borderColor	--p-toast-error-border-color	Border color of error
error.color	--p-toast-error-color	Color of error
error.detailColor	--p-toast-error-detail-color	Detail color of error
error.shadow	--p-toast-error-shadow	Shadow of error
closeButton.hoverBackground	--p-toast-error-close-button-hover-background	Close button hover background of error
focusRing.color	--p-toast-error-close-button-focus-ring-color	Close button focus ring color of error
focusRing.shadow	--p-toast-error-close-button-focus-ring-shadow	Close button focus ring shadow of error
secondary.background	--p-toast-secondary-background	Background of secondary
secondary.borderColor	--p-toast-secondary-border-color	Border color of secondary
secondary.color	--p-toast-secondary-color	Color of secondary
secondary.detailColor	--p-toast-secondary-detail-color	Detail color of secondary
secondary.shadow	--p-toast-secondary-shadow	Shadow of secondary
closeButton.hoverBackground	--p-toast-secondary-close-button-hover-background	Close button hover background of secondary
focusRing.color	--p-toast-secondary-close-button-focus-ring-color	Close button focus ring color of secondary
focusRing.shadow	--p-toast-secondary-close-button-focus-ring-shadow	Close button focus ring shadow of secondary
contrast.background	--p-toast-contrast-background	Background of contrast
contrast.borderColor	--p-toast-contrast-border-color	Border color of contrast
contrast.color	--p-toast-contrast-color	Color of contrast
contrast.detailColor	--p-toast-contrast-detail-color	Detail color of contrast
contrast.shadow	--p-toast-contrast-shadow	Shadow of contrast
closeButton.hoverBackground	--p-toast-contrast-close-button-hover-background	Close button hover background of contrast
focusRing.color	--p-toast-contrast-close-button-focus-ring-color	Close button focus ring color of contrast
focusRing.shadow	--p-toast-contrast-close-button-focus-ring-shadow	Close button focus ring shadow of contrast

Toast

Import #

Basic #

Severity #

Position #

Multiple #

Sticky #

Template #

Headless #

Responsive #

Animation #

Accessibility #

Screen Reader

Close Button Keyboard Support

Toast API

Toast #

Properties #

Emitters #

Templates #

Events #

ToastCloseEvent #

Interfaces #

ToastMessageOptions #

Toast Theming

CSS Classes #

Toast Design Tokens #