Overlay

Confirm popup

Styled wrapper around the headless `KjConfirmPopup` state-container directive. Composes the core directive via `hostDirectives` and forwards every confirm-popup input under its `kj`-prefixed name. The host renders with `display: contents` so it never interferes with the consumer's layout. Pair with `<kj-confirm-popup-trigger>` for the activator (typically the destructive button) and `<kj-confirm-popup-content>` (placed inside an `<ng-template>`) for the floating panel.

03

Import

#import

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

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

Playground

#playground
default focus
<kj-confirm-popup
  [kjDestructive]="true"
>
  <kj-button kjConfirmPopupTrigger #trig="kjConfirmPopupTrigger" kjVariant="destructive">Delete item</kj-button>
  <kj-confirm-popup-content [kjFor]="trig">
    <p kjConfirmPopupMessage>Delete this item?</p>
    <kj-confirm-popup-actions>
      <kj-confirm-popup-cancel><kj-button kjVariant="ghost">Cancel</kj-button></kj-confirm-popup-cancel>
      <kj-confirm-popup-action><kj-button kjVariant="destructive">Confirm</kj-button></kj-confirm-popup-action>
    </kj-confirm-popup-actions>
  </kj-confirm-popup-content>
</kj-confirm-popup>