Toast

Toast is used to display messages in an overlay.

Severities

Positions

Options

Clear

Custom

Import via Module


import { Toast } from 'primereact/toast';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/toast/toast.min.js"></script>

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'});

Message API

Name	Type	Default	Description
severity	string	null	Severity of the message.
summary	element/string	null	Summary content of the message.
detail	element/string	null	Detail content of the message.
content	any	null	Custom content of the message. If enabled, summary and details properties are ignored.
className	string	null	Style class of the message.
style	object	null	Inline style of the message.
contentClassName	string	null	Style class of the message content.
contentStyle	object	null	Inline style of the message content.
closable	boolean	true	Whether the message can be closed manually using the close icon.
sticky	element	null	When enabled, message is not removed automatically.
life	number	3000	Delay in milliseconds to close the message automatically.

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();

Replacing Messages

replace(newMessages) method adds new messages after removing all old messages.


toast.current.replace(newMessages);

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
className	string	null	Style class of the element.
style	object	null	Inline style of the element.
baseZIndex	number	0	Base zIndex value to add to initial layering of PrimeReact components which start from 1000.
position	string	topright	Position of the toast in viewport, valid values are "top-right", "top-left", "bottom-left" and "bottom-right".
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
appendTo	DOM element \| string	self	DOM element instance where the component should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.

Events

Name	Parameters	Description
onRemove	message: Removed message	Callback to invoke when a message is removed.
onClick	message: Clicked message	Callback to invoke when a message gets clicked.
onShow	-	Callback to invoke when message becomes visible.
onHide	-	Callback to invoke when message becomes hidden.
onMouseEnter	event: Mouse Event	Callback to invoke when a message gets focus with mouse.
onMouseLeave	event: Mouse Event	Callback to invoke when a message loses focus with mouse.

Styling

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

Name	Element
p-toast	Main container element.
p-toast-container	Container of a message item.
p-toast-item	Message element.
p-toast-icon-close	Close icon of a message.
p-toast-image	Severity icon.
p-toast-message	Container of message texts.
p-toast-title	Summary of the message.