Messages

Messages component is used to display inline messages.

Import#


import { Messages } from 'primereact/messages';

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


<Messages ref={msgs} />

Severity#

The severity option specifies the type of the message.


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}
]);

Dynamic#

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


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

<Messages ref={msgs} />

Closable#

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


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}
]);

Sticky#

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


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 }
]);

Custom Icon#

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


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>
        )
    }
]);

Template#

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


    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>
        )
    });

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.