Message component is used to display inline messages.

import Message from 'primevue/message';

Message component requires a content to display.

<Message>Message Content</Message>

The severity option specifies the type of the message.

<Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message>
<Message severity="warn">Warning Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>

Multiple messages can be displayed using the standard v-for directive.

<Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div">
    <Message v-for="msg of messages" :key="" :severity="msg.severity">{{ msg.content }}</Message>

Messages are closable by default, disable closable option to remove the close button.

<Message :closable="false">Not Closable</Message>

Messages can disappear automatically by turning the sticky option off. The timeout duration is defined using the life property in milliseconds.

<Button label="Turn off Sticky" @click="sticky = false" />
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
<Message severity="warn" :sticky="sticky" :life="3000">Warning Message</Message>
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>

Icon property and the messageicon slots are available to customize the icon of the message

<Message severity="info" icon="pi pi-send">Info Message</Message>
<Message severity="success">
    <template #messageicon>
        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
    <span class="ml-2">How may I help you?</span>

Screen Reader

Message component uses 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

enterCloses the message.
spaceCloses the message.