Skip to main content
Overlay

Dialog

Service-launched modal dialog. Inject `KjDialogService` and call `open()` with a body component that renders `<kj-dialog>`; put the heading in `<kj-dialog-title>` (or `[kjDialogTitle]`) so the dialog is announced by name. The wrapper component exists purely to give the dialog suite a dedicated documentation page.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjDialogComponent } from '@kouji-ui/components';
04

Playground

#playground
<kj-button (click)="open()">Open dialog</kj-button>

// dialog body component
<kj-dialog>
  <h2 kjDialogTitle>Save changes?</h2>
  <p>Your edits will be applied immediately.</p>
  <kj-button kjVariant="ghost">Cancel</kj-button>
  <kj-button kjVariant="default">Save</kj-button>
</kj-dialog>