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.
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. |
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.
Key | Function |
---|---|
enter | Closes the message. |
space | Closes the message. |