Message
Message component is used to display inline messages.
Import #
import { MessageModule } from 'primeng/message';
Basic #
Message component requires a content to display.
<p-message>Message Content</p-message>
Severity #
The severity option specifies the type of the message.
<p-message severity="success">Success Message</p-message>
<p-message severity="info">Info Message</p-message>
<p-message severity="warn">Warn Message</p-message>
<p-message severity="error">Error Message</p-message>
<p-message severity="secondary">Secondary Message</p-message>
<p-message severity="contrast">Contrast Message</p-message>
Icon #
The icon of a message is specified with the icon property.
<p-message severity="info" icon="pi pi-send" text="Info Message" styleClass="h-full" />
<p-message severity="success">
<ng-template #icon>
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
</ng-template>
<span class="ml-2">How may I help you?</span>
</p-message>
Outlined #
Configure the variant value as outlined for messages with borders and no background.
<p-message severity="success" variant="outlined">Success Message</p-message>
<p-message severity="info" variant="outlined">Info Message</p-message>
<p-message severity="warn" variant="outlined">Warn Message</p-message>
<p-message severity="error" variant="outlined">Error Message</p-message>
<p-message severity="secondary" variant="outlined">Secondary Message</p-message>
<p-message severity="contrast" variant="outlined">Contrast Message</p-message>
Simple #
Configure the variant value as simple for messages without borders and backgrounds.
<p-message severity="success" variant="simple">Success Message</p-message>
<p-message severity="info" variant="simple">Info Message</p-message>
<p-message severity="warn" variant="simple">Warn Message</p-message>
<p-message severity="error" variant="simple">Error Message</p-message>
<p-message severity="secondary" variant="simple">Secondary Message</p-message>
<p-message severity="contrast" variant="simple">Contrast Message</p-message>
Sizes #
Message provides small and large sizes as alternatives to the base.
<p-message size="small" icon="pi pi-send">Small Message</p-message>
<p-message icon="pi pi-user">Normal Message</p-message>
<p-message size="large" icon="pi pi-check">Large Message</p-message>
Forms #
Validation errors in a form are displayed with the error severity.
<div class="flex flex-col gap-4">
<p-message severity="error" icon="pi pi-times-circle" styleClass="mb-2">Validation Failed</p-message>
<div class="flex flex-col gap-1">
<input pInputText placeholder="Username" [(ngModel)]="username" aria-label="username" [invalid]="!username" />
@if (!username) {
<p-message severity="error" variant="simple" size="small">Username is required</p-message>
}
</div>
<div class="flex flex-col gap-1">
<p-inputmask mask="(999) 999-9999" [(ngModel)]="phone" placeholder="Phone" [invalid]="!phone" />
@if (!phone) {
<p-message severity="error" variant="simple" size="small">Phone number is required</p-message>
}
</div>
</div>
