Toast Toast is used to display messages in an overlay.

{{message.summary}}

{{message.detail}}

Severities

Multiple

Clear

Positions

Template

Import


import {ToastModule} from 'primeng/toast';

Getting Started

A single message is specified by the Message interface having the following properties.

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.

A message is displayed using a MessageService, make sure your component has an injectable MessageService defined as a provider otherwise Toast cannot be utilized.


<p-toast></p-toast>


import {Component} from '@angular/core';
import {MessageService} from 'primeng/api';

@Component({
    templateUrl: './my.component.html'
})
export class MyComponent {
    
    constructor(private messageService: MessageService) {}
    
    addSingle() {
        this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'});
    }
    
    addMultiple() {
        this.messageService.addAll([{severity:'success', summary:'Service Message', detail:'Via MessageService'},
                                    {severity:'info', summary:'Info Message', detail:'Via MessageService'}]);
    }
    
    clear() {
        this.messageService.clear();
    }
}

Positions

Toast supports various positions where default is "top-right".


<p-toast position="top-left"></p-toast>

Valid values of the position property would be;

  • top-right
  • top-left
  • bottom-right
  • bottom-left
  • top-center
  • bottom-center
  • center

Targeting Messages

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="myKey1"></p-toast>
<p-toast key="myKey2"></p-toast>


this.messageService.add({key: 'myKey1': severity:'success', summary: 'Summary Text', detail: 'Detail Text'});
this.messageService.add({key: 'myKey2': severity:'success', summary: 'Summary Text', detail: 'Detail Text'});

Clearing Messages

Clicking the close icon on the message, removes it manually. Same can also be achieved programmatically using the clear function of the message service. 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="myKey1"></p-toast>
<p-toast key="myKey2"></p-toast>


this.messageService.clear();            //clears messages of both toast components
this.messageService.clear('myKey1');    //clears messages of the first toast only

Templating

Templating allows customizing the content where the message instance is available as the implicit variable.


<p-toast position="center" key="c" (onClose)="onReject()" [modal]="true" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div style="text-align: center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
            <h3>{{message.summary}}</h3>
            <p>{{message.detail}}</p>
        </div>
        <div class="ui-g ui-fluid">
            <div class="ui-g-6">
                <button type="button" pButton (click)="onConfirm()" label="Yes" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="No" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>

Properties

Name Type Default Description
key string null Key to match the key of a message to display.
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".
modal boolean false Defines whether background should be blocked when a message is displayed.
baseZIndex number 0 Base zIndex value to use in layering.
autoZIndex boolean true Whether to automatically manage layering.

Events

Name Parameters Description
onClose event.message: Removed message Callback to invoke when a message is closed.

Styling

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

Name Element
ui-toast Main container element.
ui-toast-top-right Main container element positioned at the top right of the screen.
ui-toast-top-left Main container element positioned at the top right of the screen.
ui-toast-bottom-right Main container element positioned at the top right of the screen.
ui-toast-bottom-left Main container element positioned at the top right of the screen.
ui-toast-top-center Main container element positioned at the top center of the screen.
ui-toast-bottom-center Main container element positioned at the bottom center of the screen.
ui-toast-center Main container element positioned at the center of the screen.
ui-toast-message Element of a message.
ui-toast-message-info Element of an info message.
ui-toast-message-success Element of an success message.
ui-toast-message-warn Element of an warn message.
ui-toast-message-error Element of an error message.
ui-toast-message-content Content element of a message element.
ui-toast-close-icon Icon to close a message.
ui-toast-message-text-content Content element of the message text.

Dependencies

None.

View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>

<p-toast [style]="{marginTop: '80px'}" position="top-left" key="tl"></p-toast>

<p-toast [style]="{marginTop: '80px'}" position="top-center" key="tc"></p-toast>

<p-toast [style]="{marginTop: '80px'}" styleClass="custom-toast" key="custom" position="bottom-center"></p-toast>

<p-toast position="center" key="c" (onClose)="onReject()" [modal]="true" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div style="text-align: center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
            <h3>{{message.summary}}</h3>
            <p>{{message.detail}}</p>
        </div>
        <div class="ui-g ui-fluid">
            <div class="ui-g-6">
                <button type="button" pButton (click)="onConfirm()" label="Yes" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="No" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>

<h3 class="first">Severities</h3>
<button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"></button>
<button type="button" pButton (click)="showInfo()" label="Info" class="ui-button-info"></button>
<button type="button" pButton (click)="showWarn()" label="Warn" class="ui-button-warning"></button>
<button type="button" pButton (click)="showError()" label="Error" class="ui-button-danger"></button>

<h3>Multiple</h3>
<button type="button" pButton (click)="showMultiple()" label="Multiple"></button>

<h3>Clear</h3>
<button type="button" pButton (click)="clear()" icon="pi pi-times" label="Remove All"></button>

<h3>Positions</h3>
<button type="button" pButton (click)="showTopLeft()" label="Top Left" class="ui-button-success"></button>
<button type="button" pButton (click)="showTopCenter()" label="Top Center" class="ui-button-info"></button>

<h3>Template</h3>
<button type="button" pButton (click)="showConfirm()" label="Confirm" class="ui-button-warning"></button>


@Component({
    templateUrl: './toastdemo.html',
    styles: [`
        :host ::ng-deep button {
            margin-right: .25em;
        }

        :host ::ng-deep .custom-toast .ui-toast-message {
            color: #ffffff;
            background: #FC466B;
            background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);
            background: linear-gradient(to right, #3F5EFB, #FC466B);
        }

        :host ::ng-deep .custom-toast .ui-toast-close-icon {
            color: #ffffff;
        }
    `],
    providers: [MessageService]
})
export class ToastDemo {

    constructor(private messageService: MessageService) {}

    showSuccess() {
        this.messageService.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
    }

    showInfo() {
        this.messageService.add({severity:'info', summary: 'Info Message', detail:'PrimeNG rocks'});
    }

    showWarn() {
        this.messageService.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes'});
    }

    showError() {
        this.messageService.add({severity:'error', summary: 'Error Message', detail:'Validation failed'});
    }

    showCustom() {
        this.messageService.add({key: 'custom', severity:'info', summary: 'Custom Toast', detail:'With a Gradient'});
    }

    showTopLeft() {
        this.messageService.add({key: 'tl', severity:'info', summary: 'Success Message', detail:'Order submitted'});
    }

    showTopCenter() {
        this.messageService.add({key: 'tc', severity:'warn', summary: 'Info Message', detail:'PrimeNG rocks'});
    }

    showConfirm() {
        this.messageService.clear();
        this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'Are you sure?', detail:'Confirm to proceed'});
    }

    showMultiple() {
        this.messageService.addAll([
            {severity:'info', summary:'Message 1', detail:'PrimeNG rocks'},
            {severity:'info', summary:'Message 2', detail:'PrimeUI rocks'},
            {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
        ]);
    }

    onConfirm() {
        this.messageService.clear('c');
    }

    onReject() {
        this.messageService.clear('c');
    }
    
    clear() {
        this.messageService.clear();
    }
}