V3 has reached EOL, Upgrade to PrimeVue 4

Message

Message component is used to display inline messages.

Import #


import Message from 'primevue/message';

Basic #

Message component requires a content to display.

Message Content


<Message>Message Content</Message>

Severity #

The severity option specifies the type of the message.

Success Message

Info Message

Warning Message

Error Message

Secondary Message

Contrast 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>

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, disable closable option to remove the close button.

Not Closable


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

Sticky #

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

Success Message

Info Message

Warning Message

Error Message


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

Custom Icon #

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

Info Message

How may I help you?


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

name	type	default	description
severity	HintedString<"error" \| "success" \| "secondary" \| "info" \| "contrast" \| "warn"	info	Severity level of the message.
closable	boolean	true	Whether the message can be closed manually using the close icon.
sticky	boolean	true	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	null	Icon to display in the message close button.
closeButtonProps	ButtonHTMLAttributes	null	Used to pass all properties of the HTMLButtonElement to the close button.
pt	PassThrough<MessagePassThroughOptions<any	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
close	event: Event	void	Callback to invoke when a message is closed.
life-end		void	Callback to invoke when the message's timeout is over.

name	parameters	returnType	description
default		VNode<RendererNode, RendererElement, Object>[]	Default custom slot.
messageicon	scope: { class: any, // Style class of the item icon element. }	VNode<RendererNode, RendererElement, Object>[]	Custom message icon template.
closeicon	scope: { class: any, // Style class of the item icon element. }	VNode<RendererNode, RendererElement, Object>[]	Custom close icon template.
container	scope: { onClose: () ⇒ void, // Close message function. closeCallback: () ⇒ void, // Close message function. }	VNode<RendererNode, RendererElement, Object>[]	Custom container slot.

name	type	default	description
instance	any	null	Defines instance.
props	MessageProps	null	Defines valid properties.
state	MessageState	null	Defines current inline state.
parent	any	null	Defines parent instance.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	MessagePassThroughOptionType<T	null	Used to pass attributes to the root's DOM element.
wrapper	MessagePassThroughOptionType<T	null	Used to pass attributes to the wrapper's DOM element.
icon	MessagePassThroughOptionType<T	null	Used to pass attributes to the icon's DOM element.
text	MessagePassThroughOptionType<T	null	Used to pass attributes to the text's DOM element.
button	MessagePassThroughOptionType<T	null	Used to pass attributes to the button's DOM element.
closeButton	MessagePassThroughOptionType<T	null	Used to pass attributes to the button's DOM element.
buttonIcon	MessagePassThroughOptionType<T	null	Used to pass attributes to the button icon's DOM element.
closeIcon	MessagePassThroughOptionType<T	null	Used to pass attributes to the button icon's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.
transition	MessagePassThroughTransitionType<T	null	Used to control Vue Transition API.

Message

Import #

Basic #

Severity #

Dynamic #

Closable #

Sticky #

Custom Icon #

Accessibility #

Screen Reader

Close Button Keyboard Support

Message API

Message #

Props #

Emits #

Slots #

Interfaces #

MessagePassThroughMethodOptions #

MessagePassThroughOptions #

MessagePassThroughAttributes #

MessageState #

Types #

MessagePassThroughOptionType #

MessagePassThroughTransitionType #