lara-light-indigo

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
NameTypeDefaultDescription
severitystringnullSeverity of the message.
summaryelement/stringnullSummary content of the message.
detailelement/stringnullDetail content of the message.
contentanynullCustom content of the message. If enabled, summary and details properties are ignored.
classNamestringnullStyle class of the message.
styleobjectnullInline style of the message.
contentClassNamestringnullStyle class of the message content.
contentStyleobjectnullInline style of the message content.
closablebooleantrueWhether the message can be closed manually using the close icon.
stickyelementnullWhen enabled, message is not removed automatically.
lifenumber3000Delay 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();
 
Properties
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
classNamestringnullStyle class of the element.
styleobjectnullInline style of the element.
baseZIndexnumber0Base zIndex value to add to initial layering of PrimeReact components which start from 1000.
positionstringtoprightPosition of the toast in viewport, valid values are "top-right", "top-left", "bottom-left" and "bottom-right".
transitionOptionsobjectnullThe properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
appendToDOM element | stringselfDOM 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
NameParametersDescription
onRemovemessage: Removed message Callback to invoke when a message is removed.
onClickmessage: 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.
Styling

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.
Dependencies
  • react-transition-group

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma