lara-light-indigo

Messages

Messages is used to display inline messages with various severities.

Severities
Dynamic
Static Content
Inline Message

Message component is used to display inline messages mostly within forms.

Validation Message
Form Layout
Username is not available.
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
NameTypeDefaultDescription
severitystringnullSeverity of the message.
contentelementnullTemplate of the message.
summaryelementnullSummary content of the message.
detailelementnullDetail content of the message.
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.


<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
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
classNamestringnullStyle class of the element.
stylestringnullInline style of the element.
severitystringnullSeverity level of the message.
textanynullText of the message.
stylestringnullMessage text.
contentelementnullTemplate of the message.
Properties of Messages
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
classNamestringnullStyle class of the element.
stylestringnullInline style of the element.
transitionOptionsobjectnullThe properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
Events of Messages
NameParametersDescription
onRemovemessage: Removed message Callback to invoke when a message is removed.
onClickmessage: Clicked message Callback to invoke when a message gets clicked.
Styling

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

NameElement
p-messagesContainer element.
p-messages-infoContainer element when displaying info messages.
p-messages-warnContainer element when displaying warning messages.
p-messages-errorContainer element when displaying error messages.
p-messages-successContainer element when displaying success messages.
p-messages-closeClose icon.
p-messages-iconSeverity icon.
p-messages-summarySummary of a message.
p-messages-detailDetail of a 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