import Message from 'primevue/message';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
Message component requires a content to display.
<Message>Welcome to PrimeVue</Message>
Multiple messages can be displayed using the standard v-for directive.
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
data() {
return {
messages: [
{severity: 'info', content: 'Dynamic Info Message'},
{severity: 'success', content: 'Dynamic Success Message'},
{severity: 'warn', content: 'Dynamic Warning Message'}
]
}
}
There are four possible values for the severity of a message. Default one is "info".
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 severity="success" :closable="false">Order Submitted</Message>
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="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
import InlineMessage from 'primevue/inlinemessage';
InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, severity of the message.
<InputText placeholder="Username" class="p-invalid" />
<InlineMessage>Field is required</InlineMessage>
| Name | Type | Default | Description |
|---|---|---|---|
| severity | string | info | Severity level of the message. |
| closable | boolean | true | Whether the message can be closed manually using the close icon. |
| sticky | boolean | null | When enabled, message is not removed automatically. |
| life | number | 3000 | Delay in milliseconds to close the message automatically. |
| icon | string | null | Display a custom icon for the message. |
| closeIcon | string | pi pi-times | Icon to display in the message close button. |
| closeButtonProps | object | null | Uses to pass all properties of the HTMLButtonElement to the close button. |
| Name | Type | Default | Description |
|---|---|---|---|
| severity | string | error | Severity level of the message. |
| Name | Parameters | Description |
|---|---|---|
| close | event: Browser event | Callback to invoke when a message is closed. |
Following is the list of structural style classes, for theming classes visit
| 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. |
| Name | Element |
|---|---|
| p-inline-message | Container element. |
| p-inline-message-info | Container element when displaying info messages. |
| p-inline-message-warn | Container element when displaying warning messages. |
| p-inline-message-error | Container element when displaying error messages. |
| p-inline-message-success | Container element when displaying success messages. |
| p-inline-message-icon | Severity icon. |
| p-inline-message-text | Content of a message. |
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
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |
None.