Source: https://primeng.org/message

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

Message

Message component is used to display inline messages.

Import #

import { MessageModule } from 'primeng/message';

Basic #

Message component requires a content to display.

Message Content

<p-message>Message Content</p-message>

Severity #

The severity option specifies the type of the message.

Success Message

Info Message

Warn Message

Error Message

Secondary Message

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

Info Message

How may I help you?

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

Success Message

Info Message

Warn Message

Error Message

Secondary Message

Contrast Message

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

Success Message

Info Message

Warn Message

Error Message

Secondary Message

Contrast Message

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

Small Message

Normal Message

Large Message

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

Validation Failed

Username is required

Phone number is required

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

• Import

• Basic

• Severity

• Icon

• Outlined

• Simple

• Sizes

• Forms

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

PrimeNG 20.3.0 by PrimeTek