React Toast

React Toast is used to display messages in an overlay.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Toast } from 'primereact/toast';

Getting Started

A single message is represented by the Message interface in PrimeReact that defines various properties such as severity, summary and detail. Messages are displayed by using the show method on the ref of the Toast instance.

Note that for animations, toast requires react-transition-group package.

<Toast ref={toast} />

toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});

Severities

There are four possible values for the severity of a message.

• success
• info
• warn
• error

Showing Messages

Show method accepts either a single message or an array of messages.

<Toast ref={toast}></Toast>

<Button onClick={showSuccess} label="Success" className="p-button-success" />
<Button onClick={showInfo} label="Info" className="p-button-info" />
<Button onClick={showWarn} label="Warn" className="p-button-warning" />
<Button onClick={showError} label="Error" className="p-button-danger" />
<Button onClick={showMultiple} label="Multiple" />

showSuccess() {
    toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
}

showInfo() {
    toast.current.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
}

showWarn() {
    toast.current.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
}

showError() {
    toast.current.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
}

showMultiple() {
    toast.current.show([
        {severity:'info', summary:'Message 1', detail:'PrimeReact rocks'},
        {severity:'info', summary:'Message 2', detail:'PrimeReact rocks'},
        {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
    ]);
}

Closable

Toasts are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.

toast.current.show({closable: false, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});

Sticky

Messages are cleared automatically after the timeout defined by life property which is 3 seconds by default. Use sticky mode to make them stay until they are manually removed.

//sticky
toast.current.show({sticky: true, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});

//automatically removed after 5 seconds
toast.current.show({life: 5000, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});

Position

There are four positions available for the toast container defined by the position property that defaults to "top-right". Other valid values are "top-left", "bottom-left" and "bottom-right"

<Toast ref={toast} position="top-left"></Toast>

Clearing Messages

clear() method removes all messages from Toast.

    toast.current.clear();

Theming

Toast supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Toast showcase for demos and documentation.