Toast

Toast is used to display messages in an overlay.

Import#


import { Toast } from 'primereact/toast';

Basic#

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" />

Severity#

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} />

Position#

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#

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


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

Sticky#

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" severity="success" />
<Button onClick={clear} label="Clear" />

Template#

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


toastBC.current.show({
    severity: 'success',
    summary: 'Can you send me the report?',
    sticky: true,
    content: (props) => (
        <div className="flex flex-column align-items-left" style={{ flex: '1' }}>
            <div className="flex align-items-center gap-2">
                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
                <span className="font-bold text-900">Amy Elsner</span>
            </div>
            <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
            <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear}></Button>
        </div>
    )
});

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility#

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

Key	Function
enter	Closes the message.
space	Closes the message.