Source: https://primereact.org/messages/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

Messages

Messages component is used to display inline messages.

Import#

---

import { Messages } from 'primereact/messages';
         

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

InfoMessage Content

<Messages ref={msgs} />
         

Copy

Severity#

---

The severity option specifies the type of the message.

InfoMessage Content

SuccessMessage Content

WarningMessage Content

ErrorMessage Content

SecondaryMessage Content

ContrastMessage Content

msgs.current.show([\
    {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false},\
    {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false},\
    {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false},\
    {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false},\
    {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false},\
    {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false}\
]);
         

Copy

Dynamic#

---

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

ShowClear

<Button type="button" onClick={addMessages} label="Show" className="mr-2" />
<Button type="button" onClick={clearMessages} label="Clear" className="p-button-secondary" />

<Messages ref={msgs} />
         

Copy

Closable#

---

A message displays a close icon by default, closable option is used to control this behavior.

SuccessClosable Message

InfoNot Closable Message

msgs.current.show([\
    { sticky: true, severity: 'success', summary: 'Success', detail: 'Message is closable'},\
    { sticky: true, severity: 'info', summary: 'Info', detail: 'Message is not closable', closable: false}\
]);
         

Copy

Sticky#

---

A message disappears after 3000ms defined the life option, set sticky option to displays message that do not hide automatically.

SuccessMessage Content

InfoMessage Content

WarningMessage Content

ErrorMessage Content

msgs.current.show([\
    { sticky: true, life: 1000, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },\
    { sticky: true, life: 2000, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },\
    { sticky: true, life: 3000, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },\
    { sticky: true, life: 4000, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }\
]);
         

Copy

Custom Icon#

---

A message with custom icon can be created by simply using icon or content options.

Info message

How may I help you?

msgs.current.show([\
    { sticky: true, severity: 'info', icon: 'pi pi-send', detail: 'Info message' },\
    {\
        severity: 'success',\
        sticky: true,\
        content: (\
            <React.Fragment>\
                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />\
                <div className="ml-2">How may I help you?</div>\
            </React.Fragment>\
        )\
    }\
]);
         

Copy

Template#

---

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

Always bet on Prime.

    msgs.current.show({
        severity: 'info',
        sticky: true,
        content: (
            <React.Fragment>
                <img alt="logo" src="/images/logo.png" width="32" />
                <div className="ml-2">Always bet on Prime.</div>
            </React.Fragment>
        )
    });
         

Copy

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

• Dynamic

• Closable

• Sticky

• Custom Icon

• Template

• Accessibility

PrimeReact 10.9.7 by PrimeTek