Messages

Import via Module

import { Messages } from 'primereact/messages';
import { Message } from 'primereact/message';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/messages/messages.min.js"></script>
<script src="https://unpkg.com/primereact/message/message.min.js"></script>
 

Getting Started

A single message is specified 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 Messages instance.

Note that for animations, messages requires react-transition-group package.

<Messages ref={messages}></Messages>
 

messages.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
 

Message API

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.

<Messages ref={messages}></Messages>

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

const showSuccess = () => {
messages.current.show({ severity: 'success', summary: 'Success Message', detail: 'Order submitted' });
}

const showInfo = () => {
messages.current.show({ severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks' });
}

const showWarn = () => {
messages.current.show({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
}

const showError = () => {
messages.current.show({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
}

const showMultiple = () => {
messages.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'}
]);
}
 

Clearing Messages

clear() method removes all messages.

messages.current.clear();
 

Replacing Messages

replace(newMessages) method adds new messages after removing all old messages.

messages.current.replace(newMessages);
 

Closable

Messages 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.

messages.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
messages.current.show({ sticky: true, severity: 'error', summary: 'Error Message', detail: 'Validation failed' });

//automatically removed after 5 seconds
messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
 

Message Component

Message component is useful in cases where a single message needs to be displayed related to an element such as forms. It has two properties, severity and text of the message.

<h5>Inline Message CSS</h5>
<p>CSS helpers to display inline messages mostly within forms.</p>
<Message severity="info" text="PrimeNG Rocks"></Message>
<Message severity="success" text="Record Saved"></Message>
<Message severity="warn" text="Are you sure?"></Message>
<Message severity="error" text="Field is required"></Message>
 

Properties of Message

Properties of Messages

Events of Messages

Styling

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

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

• react-transition-group