Message

Message component displays information related to another element such as invalid input.

Import#


import { Message } from 'primereact/message';

Basic#

Text to display is defined with the text property.

Message Content


<Message text="Message Content" />

Severity#

The severity property specifies the type of the message.

Info Message

Success Message

Warning Message

Error Message


<Message severity="info" text="Info Message" />
<Message severity="success" text="Success Message" />
<Message severity="warn" text="Warning Message" />
<Message severity="error" text="Error Message" />

Form#

Message component is handy when displaying error messages next to form elements.

Username is required


<div className="flex flex-wrap align-items-center mb-3 gap-2">
    <label htmlFor="username" className="p-sr-only">Username</label>
    <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
    <Message severity="error" text="Username is required" />
</div>
<div className="flex flex-wrap align-items-center gap-2">
    <label htmlFor="email" className="p-sr-only">Email</label>
    <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
    <Message severity="error" />
</div>

Template#

Custom content is displayed with the content property.

Always bet on Prime.


<Message
style={{
    border: 'solid #696cff',
    borderWidth: '0 0 0 6px',
    color: '#696cff'
}}
className="border-primary w-full justify-content-start"
severity="info"
content={content}
/>

Style#

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

Name	Element
p-messages	Container element.
p-messages-info	Container element when displaying info messages.
p-messages-warn	Container element when displaying warning messages.
p-messages-error	Container element when displaying error messages.
p-messages-success	Container element when displaying success messages.
p-messages-close	Close icon.
p-messages-icon	Severity icon.
p-messages-summary	Summary of a message.
p-messages-detail	Detail of a message.

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

Accessibility#

Screen Reader

Message components use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and aria-label can optionally be used as well.

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.