Last updated on Nov 17, 2025

Version: 1.0.0

Dialog

A dialog is a small overlay container that displays brief information and can also include controls.

Default (width 400px)

This is a default dialog that contains controls, excluding Grid, Table, and Rich Text. The width is 400px.

Structure

• Header
  • Title: "[Action] [Object]"
  • Buttons:
    • Close
• Body: Contains applicable form controls
• Footer: Button configuration may vary based on the specific use case.
  • Cancel
  • [Action]

HTML

<h2 mat-dialog-title>Title</h2>
<mat-dialog-content>
  <div class="content-dialog">
    <div class="flex flex-col pt-2">
      Content
    </div>
  </div>
  <div class="flex flex-row items-center gap-3 pb-6">
    <span class="flex-1"></span>
    <button mat-flat-button mat-dialog-close>Cancel</button>
    <button mat-flat-button color="primary" (click)="action()">Action</button>
  </div>
</mat-dialog-content>

TS

showModelDialog(dialogTarget: any, data: any) {
  let _panelClass: string = 'dialog-form-xs';
  let settings = {
    panelClass: _panelClass,
    autoFocus: true,
  };
  this.openDialog(dialogTarget, data, settings)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: (res: any) => {
        this.selection.clear();
      },
    });
}

⚡Note: If it’s a dialog about editing, the primary button should be Save.

Medium Dialog (width 600px)

This is a single-column dialog that contains all controls, including Grid, Table, and Rich Text. The width is 600px.

Structure

• Header:
  • Title: "[Action] [Object]"
  • Button: 'Close'
• Body: Contains applicable form controls
• Footer: (Button configuration may vary based on the specific use case.)
  • ‘Cancel’ button
  • [Action] button
  • [Tertiary] button on the left side

HTML

<h2 mat-dialog-title>Title</h2>
<mat-dialog-content>
  <div class="content-dialog">
    <div class="flex flex-col pt-2">
      Content
    </div>
  </div>
  <div class="flex flex-row items-center gap-3 pb-6">
    <button mat-flat-button color="primary" (click)="tertiary()" mat-dialog-close>Tertiary</button>
    <span class="flex-1"></span>
    <button mat-flat-button mat-dialog-close>Cancel</button>
    <button mat-flat-button color="primary" (click)="action()">Action</button>
  </div>
</mat-dialog-content>

TS

showModelDialog(dialogTarget: any, data: any) {
  let _panelClass: string = 'dialog-form-sm';
  let settings = {
    panelClass: _panelClass,
    autoFocus: true,
  };
  this.openDialog(dialogTarget, data, settings)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: (res: any) => {
        this.selection.clear();
      },
    });
}

⚡Note: If it’s a dialog about editing, the primary button should be Save.

Large Dialog (width 800px)

This is a dialog with a two- to three-column layout that contains all controls, including Grid, Table, and Rich Text. The width is 800px.

Structure

• Header:
  • Title: "[Action] [Object]"
  • Button: 'Close'
• Body: Contains applicable form controls
• Footer: (Button configuration may vary based on the specific use case.)
  • ‘Cancel’ button
  • [Action] button
  • [Tertiary] button on the left side

HTML

<h2 mat-dialog-title>Title</h2>
<mat-dialog-content>
  <div class="content-dialog">
    <div class="flex flex-col pt-2">
      Content
    </div>
  </div>
  <div class="flex flex-row items-center gap-3 pb-6">
    <button mat-flat-button color="primary" (click)="tertiary()">Tertiary</button>
    <span class="flex-1"></span>
    <button mat-flat-button mat-dialog-close>Cancel</button>
    <button mat-flat-button color="primary" (click)="action()">Action</button>
  </div>
</mat-dialog-content>

TS

showModelDialog(dialogTarget: any, data: any) {
  let _panelClass: string = 'dialog-form-lg';
  let settings = {
    panelClass: _panelClass,
    autoFocus: true,
  };
  this.openDialog(dialogTarget, data, settings)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: (res: any) => {
        this.selection.clear();
      },
    });
}

⚡Note: If it’s a dialog about editing, the primary button should be Save.

Notification Dialog (width 400px)

This is for notification only.

Structure

• Header:
  • Title: ‘Notification’
• Body: Contains text only
• Footer:
  • Button: ‘Close’

HTML

<h2 mat-dialog-title>Title</h2>
<mat-dialog-content>
  <div class="content-dialog">
    <div class="flex flex-col pt-2">
      Content
    </div>
  </div>
  <div class="flex flex-row items-center gap-3 pb-6">
    <span class="flex-1"></span>
    <button mat-flat-button mat-dialog-close>Cancel</button>
  </div>
</mat-dialog-content>

TS

showModelDialog(dialogTarget: any, data: any) {
  let _panelClass: string = 'dialog-form-xs';
  let settings = {
    panelClass: _panelClass,
    autoFocus: true,
  };
  this.openDialog(dialogTarget, data, settings)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: (res: any) => {
        this.selection.clear();
      },
    });
}

User Experience

✨Only the Notification dialog can be closed by clicking outside of it.

✨Press the Esc key or click the Close or Cancel buttons to close a dialog.

✨Press the Tab key to move the focus to the next control in order, from left to right and from top to bottom.

EXAMPLES

Figma

All details and specifications in the design can be referenced through the Figma link below.

Dialog UI Design