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

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, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
        { sticky: true, severity: 'info', summary: 'Info', 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 }
]);

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

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.