Toast

Toast is used to display messages in an overlay.


import { Toast } from 'primereact/toast';
         

Messages are displayed by calling the show method provided by the component ref. A single message is specified by the Message interface that defines various properties such as severity, summary and detail.


<Toast ref={toast} />
<Button onClick={show} label="Basic" />
         

The severity option specifies the type of the message.


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

Location of the messages is customized with the position property.


<Toast ref={toastTL} position="top-left" />
<Toast ref={toastBL} position="bottom-left" />
<Toast ref={toastBR} position="bottom-right" />
<Button label="Top Left" className="mr-2" onClick={showTopLeft} />
<Button label="Bottom Left" className="p-button-warning" onClick={showBottomLeft} />
<Button label="Bottom Right" className="p-button-success" onClick={showBottomRight} />
         

Multiple messages are displayed by passing an array to the show method.


<Toast ref={toast} />
<Button onClick={showMultiple} label="Multiple" className="p-button-warning" />
<Button onClick={clear} label="Clear" />
         

A message disappears after 3000ms defined the life option, set sticky option to display messages that do not hide automatically.


<Toast ref={toast} />
<Button onClick={showSticky} label="Sticky" />
         

Custom content inside a message is defined with the content option.


<Toast ref={toast} />
<Toast ref={toastBC} position="bottom-center" />
<Button type="button" onClick={confirm} label="Submit" />
         

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

NameElement
p-toastMain container element.
p-toast-containerContainer of a message item.
p-toast-itemMessage element.
p-toast-icon-closeClose icon of a message.
p-toast-imageSeverity icon.
p-toast-messageContainer of message texts.
p-toast-titleSummary of the message.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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, you may usecloseButtonProps to customize the element and override the default aria-label.

Close Button Keyboard Support

KeyFunction
enterCloses the message.
spaceCloses the message.