Dialog is a container to display content in an overlay window.
import { DialogModule } from 'primeng/dialog';
Dialog is used as a container and visibility is controlled with visible property.
<p-button (click)="showDialog()" label="Show" />
<p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<input pInputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<input pInputText id="email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<p-button label="Cancel" severity="secondary" (click)="visible = false" />
<p-button label="Save" (click)="visible = false" />
</div>
</p-dialog>
Dialog can be customized using header and footer templates.
<p-button (click)="showDialog()" label="Show" />
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[style]="{ width: '25rem' }">
<ng-template pTemplate="header">
<div class="inline-flex align-items-center justify-content-center gap-2">
<p-avatar
image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
shape="circle" />
<span class="font-bold white-space-nowrap">
Amy Elsner
</span>
</div>
</ng-template>
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">
Username
</label>
<input pInputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<input pInputText id="email" class="flex-auto" autocomplete="off" />
</div>
<ng-template pTemplate="footer">
<p-button
label="Cancel"
[text]="true"
severity="secondary"
(click)="visible = false" />
<p-button
label="Save"
[outlined]="true"
severity="secondary"
(click)="visible = false"
/>
</ng-template>
</p-dialog>
The position property is used to display a Dialog at all edges and corners of the screen.
<div class="flex flex-wrap gap-2">
<p-button
(click)="showDialog('left')"
icon="pi pi-arrow-right"
label="Left"
severity="secondary" />
<p-button
(click)="showDialog('right')"
icon="pi pi-arrow-left"
label="Right"
severity="secondary" />
</div>
<div class="flex flex-wrap gap-2">
<p-button
(click)="showDialog('top-left')"
icon="pi pi-arrow-down-right"
label="TopLeft"
severity="secondary" />
<p-button
(click)="showDialog('top')"
icon="pi pi-arrow-down"
label="Top"
severity="secondary" />
<p-button
(click)="showDialog('top-right')"
icon="pi pi-arrow-down-left"
label="TopRight"
severity="secondary" />
</div>
<div class="flex flex-wrap gap-2">
<p-button
(click)="showDialog('bottom-left')"
icon="pi pi-arrow-up-right"
label="BottomLeft"
severity="secondary" />
<p-button
(click)="showDialog('bottom')"
icon="pi pi-arrow-up"
label="Bottom"
severity="secondary" />
<p-button
(click)="showDialog('bottom-right')"
icon="pi pi-arrow-up-left"
label="BottomRight"
severity="secondary" />
</div>
<p-dialog
header="Edit Profile"
[modal]="true"
[(visible)]="visible"
[position]="position"
[style]="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">
Update your information.
</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">
Username
</label>
<input pInputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">
Email
</label>
<input pInputText id="email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<p-button label="Cancel" severity="secondary" (click)="visible = false" />
<p-button label="Save" (click)="visible = false" />
</div>
</p-dialog>
Setting maximizable property to true enables the full screen mode.
<p-button (click)="showDialog()" label="Show" />
<p-dialog
header="Header"
[modal]="true"
[(visible)]="visible"
[style]="{ width: '50rem' }"
[breakpoints]="{ '1199px': '75vw', '575px': '90vw' }"
[maximizable]="true">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</p-dialog>
Dialog automatically displays a scroller when content exceeeds viewport.
<p-button (click)="showDialog()" label="Show" />
<p-dialog
header="Header"
[modal]="true"
[(visible)]="visible"
[style]="{ width: '50rem' }"
[breakpoints]="{ '1199px': '75vw', '575px': '90vw' }">
<p class="mb-5">
Lorem ipsum dolor sit amet...
</p>
<p class="mb-5">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
</p>
<p class="mb-5">
At vero eos et accusamus et iusto odio dignissimos...
</p>
<p class="mb-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
<p class="mb-5">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
</p>
<p>
At vero eos et accusamus et iusto odio dignissimos...
</p>
</p-dialog>
Mask layer behind the Dialog is configured with the modal property. By default, no modal layer is added.
<p-button (click)="showDialog()" label="Show" />
<p-dialog header="Edit Profile" [(visible)]="visible" [style]="{ width: '25rem' }">
<span class="p-text-secondary block mb-5">Update your information.</span>
<div class="flex align-items-center gap-3 mb-3">
<label for="username" class="font-semibold w-6rem">Username</label>
<input pInputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex align-items-center gap-3 mb-5">
<label for="email" class="font-semibold w-6rem">Email</label>
<input pInputText id="email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-content-end gap-2">
<p-button label="Cancel" severity="secondary" (click)="visible = false" />
<p-button label="Save" (click)="visible = false" />
</div>
</p-dialog>
Dialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property is used.
<p-button (click)="showDialog()" label="Show" />
<p-dialog
header="Header"
[(visible)]="visible"
[modal]="true"
[breakpoints]="{ '1199px': '75vw', '575px': '90vw' }"
[style]="{ width: '50vw' }"
[draggable]="false"
[resizable]="false">
<p>
Lorem ipsum dolor sit amet...
</p>
</p-dialog>
Headless mode allows you to customize the entire user interface instead of the default elements.
<p-button (click)="showDialog()" icon="pi pi-user" label="Login" />
<p-dialog [(visible)]="visible">
<ng-template pTemplate="headless">
<div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
<svg width="33" height="35" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
<path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
<mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
<path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
</mask>
<g mask="url(#mask0_1_36)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
</g>
<path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
<path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
fill="var(--primary-color-text)"
/>
<path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
<path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
fill="var(--primary-color-text)"
/>
<path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
<path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
<path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
<path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
</svg>
<div class="inline-flex flex-column gap-2">
<label for="username" class="text-primary-50 font-semibold">Username</label>
<input pInputText id="username" class="bg-white-alpha-20 border-none p-3 text-primary-50"/>
</div>
<div class="inline-flex flex-column gap-2">
<label for="password" class="text-primary-50 font-semibold">Password</label>
<input pInputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"/>
</div>
<div class="flex align-items-center gap-2">
<p-button label="Sign-In" (click)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
<p-button label="Cancel" (click)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
</div>
</div>
</ng-template>
</p-dialog>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-dialog | Container element |
| p-dialog-titlebar | Container of header. |
| p-dialog-title | Header element. |
| p-dialog-titlebar-icon | Icon container inside header. |
| p-dialog-titlebar-close | Close icon element. |
| p-dialog-content | Content element. |
| p-dialog-footer | Footer element. |
Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize the element and override the default aria-label.
<p-button
icon="pi pi-external-link"
(click)="visible = true"
aria-controls="{{visible ? 'dialog' : null}}"
aria-expanded="{{visible ? true : false}}" />
<p-dialog
id="dialog"
header="Header"
[(visible)]="visible"
[style]="{ width: '50vw' }"
(onHide)="visible = false">
<p>Content</p>
</p-dialog>
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the dialog. |
| shift + tab | Moves focus to the previous the focusable element within the dialog. |
| escape | Closes the dialog if closeOnEscape is true. |
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |
API defines helper props, events and others for the PrimeNG Dialog module.
Dialog is a container to display content in an overlay window.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
Defines the templates used by the component.