KikitaUiDocs

size

appearance

title

message

State

dismissableclosable

const openDialog = kuiDialog(MyDialog);

openDialog({
  title: 'Discard changes?',
  message: 'Unsaved edits will be lost.',
})
  .pipe(takeUntilDestroyed())
  .subscribe();

No events yet.

Name	Type	Default	Description
kuiDialog(component, config?)	`(component: Type<TComponent>, config?: Omit<KuiDialogConfig, "data">) => (data: TData) => Observable<TResult \| undefined>`	`-`	Inject-function factory. Call once per injection context to get a typed opener bound to that component.
KuiDialogHost<TResult, TData>	`interface`	`-`	Contract your dialog component implements. Requires a dialogContext property injected from KUI_DIALOG_CONTEXT.
KUI_DIALOG_CONTEXT	`InjectionToken<KuiDialogContext<TResult, TData>>`	`-`	Injected inside the dialog component to read data and close the dialog.
dialogContext.data	`TData`	`-`	Data passed via the opener call, e.g. openDialog(data).
dialogContext.closable	`boolean`	`-`	Mirrors KuiDialogConfig.closable. Informational only -- the container renders .kui-dialog-close itself when true.
dialogContext.appearance	`KuiDialogAppearance`	`-`	Mirrors KuiDialogConfig.appearance, for coloring a custom icon if needed.
dialogContext.close(result?)	`(result?: TResult) => void`	`-`	Closes the dialog, optionally emitting a typed result to the opener subscription.
KuiDialogConfig.data	`TData`	`undefined`	Available on the low-level config type; kuiDialog() passes feature data through the returned opener function instead.
KuiDialogConfig.size	`'auto' \| 'sm' \| 'md' \| 'lg' \| 'fullscreen'`	`'md'`	Panel width preset: auto (min 320px), sm (400px), md (560px), lg (720px), fullscreen (fills the viewport, no border, radius or shadow). Falls back to defaults.dialog.size.
KuiDialogConfig.appearance	`'default' \| 'danger' \| 'warning'`	`'default'`	Colors .kui-dialog-icon via a CSS variable. Has no other visual effect. Falls back to defaults.dialog.appearance.
KuiDialogConfig.dismissable	`boolean`	`true`	Allows Escape and backdrop click to close the dialog. Falls back to defaults.dialog.dismissable.
KuiDialogConfig.closable	`boolean`	`true`	Shows the .kui-dialog-close button the container renders automatically, absolutely positioned top-right of the panel.
KuiDialogRef<TResult>	`class`	`-`	Return type of kuiDialog(component, config). Calling it with data opens the dialog and returns Observable<TResult \| undefined>.
kuiConfirm()	`() => (config: KuiConfirmConfig) => Observable<boolean>`	`-`	Inject-function for a pre-built confirmation dialog. No custom component required.
KuiConfirmConfig.title	`string`	`required`	Header text.
KuiConfirmConfig.message	`string \| undefined`	`-`	Body text.
KuiConfirmConfig.appearance	`KuiDialogAppearance`	`'default'`	Icon color and button tone.
KuiConfirmConfig.confirmLabel	`string \| undefined`	`dialog.confirm message`	Confirm button label. Defaults to the dialog.confirm message (OK).
KuiConfirmConfig.cancelLabel	`string \| undefined`	`dialog.cancel message`	Cancel button label. Defaults to the dialog.cancel message (Cancel).
.kui-dialog-icon	`CSS class`	`-`	Add to an SVG placed before .kui-dialog-title inside .kui-dialog-header. Fixed 20x20px, colored via appearance.
--kui-dialog-bg	`CSS custom property`	`var(--kui-color-surface-elevated)`	Panel background color.
--kui-dialog-border	`CSS custom property`	`var(--kui-color-border)`	Panel border color.
--kui-dialog-radius	`CSS custom property`	`var(--kui-radius-lg)`	Panel corner radius.
--kui-dialog-shadow	`CSS custom property`	`var(--kui-shadow-lg)`	Panel elevation shadow.
--kui-dialog-backdrop	`CSS custom property`	`oklch(0 0 0 / 0.5)`	Backdrop fill color.
KuiDialogOptions / KuiModalSurfaceOptions	`interfaces`	`-`	Shape of defaults.dialog (closable, size, appearance, dismissable, closeIcon), built on the base interface shared with the drawer. Options are read each time a dialog opens, so an open dialog keeps what it opened with.

API verified against @kikita-labs/ui v2.0.0 public typings.

Dialog — Playground