Source: https://primereact.org/toast/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Toast

Toast is used to display messages in an overlay.

Import#

import { Toast } from 'primereact/toast';

Copy

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.

Show

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

Copy

Severity#

The severity option specifies the type of the message.

SuccessInfoWarnErrorSecondaryContrast

<Toast ref={toast} />
<Button label="Success" severity="success" onClick={showSuccess} />
<Button label="Info" severity="info" onClick={showInfo} />
<Button label="Warn" severity="warning" onClick={showWarn} />
<Button label="Error" severity="danger" onClick={showError} />
<Button label="Secondary" severity="secondary" onClick={showSecondary} />
<Button label="Contrast" severity="contrast" onClick={showContrast} />

Copy

Position#

Location of the messages is customized with the position property.

Top LeftTop CenterTop RightCenterBottom LeftBottom CenterBottom Right

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

Copy

Multiple#

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

Multiple

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

Copy

Sticky#

A message will disappear after 3000ms, the default value defined for the life option. To display messages that remain visible and do not hide automatically, set the sticky option to "true".

StickyClear

<Toast ref={toast} />
<Button onClick={showSticky} label="Sticky" severity="success" />
<Button onClick={clear} label="Clear" />

Copy

Template#

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

Confirm

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

Copy

Headless#

Headless mode is enabled by defining a content prop that lets you implement entire dialog UI instead of the default elements.

View

<Toast
    ref={toast}
    content={({ message }) => (
        <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
            <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
            <div className="flex flex-column gap-3 w-full">
                <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
                <p className="m-0 text-base text-700">{message.detail}</p>
                <div className="flex flex-column gap-2">
                    <ProgressBar value={progress} showValue="false"></ProgressBar>
                    <label className="text-right text-xs text-white">{progress}% uploaded...</label>
                </div>
                <div className="flex gap-3 mb-3">
                    <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
                    <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
                </div>
            </div>
        </section>
    )}
></Toast>
<Button onClick={show} label="View" />

Copy

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 use_closeButtonProps_ to customize the element and override the default aria-label.

Close Button Keyboard Support

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

Import
Basic
Severity
Position
Multiple
Sticky
Template
Headless
Accessibility

PrimeReact 10.9.7 by PrimeTek