Dialog
@xui/dialogA modal surface over a dimmed backdrop. Backdrop, focus trap, scroll lock and focus restore come from @xui/core/overlay; none of that is exercised in jsdom, so these stories are the real check.
Install
pnpm add @xui/dialog Add the barrel to a standalone component's imports:
import { XuiDialogImports } from '@xui/dialog';
@Component({
imports: [XuiDialogImports],
// …
})Examples
Default
Loading preview…
<button xuiButton (click)="open.set(true)">Edit profile</button>
<xui-dialog [(open)]="open" title="Edit profile" icon="matPersonRound">
<xui-dialog-body>
<p>Update the details shown on your public profile.</p>
<p class="text-foreground-muted mt-2">The body scrolls on its own when the content is tall.</p>
</xui-dialog-body>
<xui-dialog-footer>
<button xuiButton variant="ghost" (click)="open.set(false)">Cancel</button>
<button xuiButton (click)="open.set(false)">Save</button>
</xui-dialog-footer>
</xui-dialog>Scrolling
Loading preview…
<button xuiButton (click)="open.set(true)">Terms</button>
<xui-dialog [(open)]="open" title="Terms of service">
<xui-dialog-body>
@for (row of rows; track row) {
<p class="py-1">Clause {{ row }} — the body owns the scroll, not the whole card.</p>
}
</xui-dialog-body>
<xui-dialog-footer align="between">
<button xuiButton variant="ghost" (click)="open.set(false)">Decline</button>
<button xuiButton (click)="open.set(false)">Accept</button>
</xui-dialog-footer>
</xui-dialog>API
The scrollable body of a dialog.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''The footer bar of a dialog, where the actions live.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''align'end' | 'between' | 'start'How the footer's buttons are distributed: packed at the end (the default), at the start, or pushed apart.'end'A modal surface centred over a dimmed backdrop.
Inputs
classClassValueThe user-defined classes on the surface. Merged last so they win.''titlestring | nullThe dialog's heading, also used as its accessible name. Without one the header renders only if showCloseButton is on.nulliconstringName of a registered @ng-icons icon, shown beside the title.sizeXuiDialogSizeMaximum width of the panel.this.config.sizecanEscapeKeyClosebooleanLet Escape close the dialog.this.config.canEscapeKeyClosecanOutsideClickClosebooleanLet a click on the backdrop close the dialog. Turn it off when the dialog holds unsaved work.this.config.canOutsideClickCloseshowCloseButtonbooleanShow the × in the header.this.config.showCloseButtonopenbooleanOpen state. Works bound (controlled) or via show()/close().falseMethods
show(): voidclose(): void