Message

    Message component is used to display inline messages.

    
    import { Message } from 'primeng/message';
    
    

    Message component requires a content to display.

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

    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>
    
    

    The severity option specifies the type of the message.

    
    <p-message severity="info" icon="pi pi-send" text="Info Message" styleClass="h-full" />
    <p-message severity="success">
        <ng-template pTemplate="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>
    
    

    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>
    
    

    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>
    
    

    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>
    
    

    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">
            <input pInputText placeholder="Username" aria-label="username" class="ng-invalid ng-dirty" />
            <p-message severity="error" variant="simple" size="small">Username is required</p-message>
        </div>
        <div class="flex flex-col">
            <input pInputText placeholder="Email" aria-label="email" class="ng-invalid ng-dirty" />
            <p-message severity="error" variant="simple" size="small">Email is not valid</p-message>
        </div>
    </div>
    
    

    Multiple messages can be displayed using the standard for block.

    
    <div class="flex gap-2">
        <p-button label="Show" (onClick)="addMessages()" />
        <p-button label="Clear" severity="secondary" (onClick)="clearMessages()" />
    </div>
    <div class="flex flex-col">
        @for (message of messages(); track message; let first = $first) {
            <p-message [severity]="message.severity" [text]="message.content" [ngClass]="{ 'mt-4': !first }" />
        }
    </div>
    
    

    Enable closable option to display an icon to remove a message.

    
    <p-message closable>Closable Message</p-message>
    
    

    Messages can disappear automatically by defined the life in milliseconds.

    
    <p-message [life]="3000" severity="success">Auto disappear message</p-message>
    
    

    Screen Reader

    Message component uses 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.

    Close Button Keyboard Support

    KeyFunction
    enterCloses the message.
    spaceCloses the message.