Message

Message component is used to display inline messages.

Import #


import Message from 'primevue/message';

Basic #

Message component requires a content to display.


<Message>Message Content</Message>

Severity #

The severity option specifies the type of the message.


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

Icon #

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


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

Form #

Validation errors in a form are displayed with the error severity.


 <div class="flex flex-wrap mb-4 gap-2">
    <InputText placeholder="Username" aria-label="username" invalid />
    <Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
    <InputText placeholder="Email" aria-label="email" invalid />
    <Message severity="error" icon="pi pi-times-circle" />
</div>

Dynamic #

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" class="flex flex-col">
    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
</transition-group>

Closable #

Enable closable option to display an icon to remove a message.


<Message closable>Closable Message</Message>

Life #

Messages can disappear automatically by defined the life in milliseconds.


<Button label="Show" @click="showMessage" :disabled="visible" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>

Accessibility #

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

Key	Function
enter	Closes the message.
space	Closes the message.