InlineMessage

Inline Message component displays information related to another element such as invalid input.

Import #


import InlineMessage from 'primevue/inlinemessage';

Basic #

InlineMessage component requires a content to display.

Username is required



<InlineMessage severity="info">Username is required</InlineMessage>

Severity #

The severity option specifies the type of the message.

Success Content

Info Content

Warning Content

Error Content



<InlineMessage severity="success">Success Content</InlineMessage>
<InlineMessage severity="info">Info Content</InlineMessage>
<InlineMessage severity="warn">Warning Content</InlineMessage>
<InlineMessage severity="error">Error Content</InlineMessage>

Form #

Message component is handy when displaying error messages next to form elements.

Username is required



<div class="flex flex-wrap align-items-center mb-3 gap-2">
    <label for="username" class="p-sr-only">Username</label>
    <InputText id="username" placeholder="Username" class="p-invalid" />
    <InlineMessage>Username is required</InlineMessage>
</div>
<div class="flex flex-wrap align-items-center gap-2">
    <label for="email" class="p-sr-only">email</label>
    <InputText id="email" placeholder="Email" class="p-invalid" />
    <InlineMessage />
</div>

Template #

Custom content inside a message is defined with the default slot.

Always bet on Prime.



<InlineMessage :style="{  border: 'solid #696cff', borderWidth: '0 0 0 6px', color: '#696cff' }"
        severity="info" class="border-primary w-full justify-content-start">
    <div class="flex align-items-center">
        <img alt="logo" src="/images/logo.svg" width="32" />
        <div class="ml-2">Always bet on Prime.</div>
    </div>
</InlineMessage>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

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-close	Close icon.
p-inline-message-icon	Severity icon.
p-inline-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.