InlineMessage

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


import InlineMessage from 'primevue/inlinemessage';

InlineMessage component requires a content to display.

Username is required


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

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>

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>

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

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

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

NameElement
p-inline-messageContainer element.
p-inline-message-infoContainer element when displaying info messages.
p-inline-message-warnContainer element when displaying warning messages.
p-inline-message-errorContainer element when displaying error messages.
p-inline-message-successContainer element when displaying success messages.
p-inline-message-closeClose icon.
p-inline-message-iconSeverity icon.
p-inline-message-textContent of a message.

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

KeyFunction
enterCloses the message.
spaceCloses the message.