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 Content</Message>
<Message severity="info">Info Message Content</Message>
<Message severity="warn">Warning Message Content</Message>
<Message severity="error">Error Message Content</Message>
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">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
</transition-group>
Closable #
Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.
<Message :closable="false">Message Content</Message>
Sticky #
Messages are sticky by default, if you require them to be cleared automatically, disable sticky property and optionally configure the life property to specify how long the message should be displayed which is 3000 ms by default.
<Message severity="success" sticky>Success Message Content</Message>
<Message severity="info" sticky>Info Message Content</Message>
<Message severity="warn" sticky>Warning Message Content</Message>
<Message severity="error" sticky>Error Message Content</Message>
Custom Icon #
The icon property can change the icon of the message.
<Message severity="info" icon="pi pi-send">Info Message Content</Message>
Template #
Custom content inside a message is defined with the default slot.
<Message
:style="{
border: 'solid #696cff',
borderWidth: '0 0 0 6px',
color: '#696cff'
}"
class="border-primary w-full justify-content-start"
severity="info"
>
<div class="flex align-items-center">
<img alt="logo" src="/images/logo.svg" width="20" />
<div class="ml-2">Always bet on Prime.</div>
</div>
</Message>
Style #
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-message | Container element. |
| p-message-info | Container element when displaying info messages. |
| p-message-warn | Container element when displaying warning messages. |
| p-message-error | Container element when displaying error messages. |
| p-message-success | Container element when displaying success messages. |
| p-message-close | Close icon. |
| p-message-icon | Severity icon. |
| p-message-text | Content of a message. |
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 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. |