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.
<InlineMessage severity="info">Username is required</InlineMessage>
The severity option specifies the type of the message.
<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.
<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.
<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.
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. |
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.
Key | Function |
---|---|
enter | Closes the message. |
space | Closes the message. |