Messages

Messages component is used to display inline messages.


import { Messages } from 'primereact/messages';
         

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

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

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

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

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


useEffect(() => {
    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 }
    ]);
}, []);
         

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


useEffect(() => {
    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>
        )
    });
}, []);
         

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.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
enterCloses the message.
spaceCloses the message.
Visit the API documentation for detailed information about all the properties, events and methods of the component.