Confirm Dialog

Confirmation modal driven by attributes. Resolves a boolean through confirm / cancel / resolved events. Esc cancels.

Inherited wc import '@esa/ecology/esa-confirm-dialog';

Preview

<button data-target="cd-default">Save changes</button>

<esa-confirm-dialog
  id="cd-default"
  heading="Save changes?"
  message="Your changes will be applied immediately."
  confirm-label="Save"
></esa-confirm-dialog>

Variants

Use warning for reversible-but-risky actions and danger for destructive ones.

<esa-confirm-dialog variant="warning" heading="Unsaved changes"
  message="You have unsaved changes that will be lost." confirm-label="Discard"></esa-confirm-dialog>
<esa-confirm-dialog variant="danger" heading="Delete project?"
  message="This action cannot be undone." confirm-label="Delete"></esa-confirm-dialog>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Reflected attribute that drives visibility. Open imperatively via show().
`heading`	`string`	`''`	Title of the confirmation.
`message`	`string`	`''`	Supporting body text.
`variant`	`'default' \| 'danger' \| 'warning'`	`'default'`	Icon and confirm-button color theme.
`confirm-label`	`string`	`'Confirm'`	Label of the confirm button. Property: `confirmLabel`.
`cancel-label`	`string`	`'Cancel'`	Label of the cancel button. Property: `cancelLabel`.
`show-icon`	`boolean`	`true`	Renders the variant icon above the heading. Property: `showIcon`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.
`show-close-button`	`boolean`	`true`	Property: `showCloseButton`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.

Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

(dismiss)="onDismiss($event.detail)"
(resolved)="onResolved($event.detail)"

Methods

Prop	Type	Default	Description
`show()`	`method`	—	Opens the dialog and focuses the confirm button.
`confirm()`	`method`	—	Resolves true and closes.
`cancel()`	`method`	—	Resolves false and closes.

Events

Event	Type	Default	Description
`confirm`	`CustomEvent`	—	Fired when the user confirms.
`cancel`	`CustomEvent`	—	Fired when the user cancels (button, backdrop, or Esc).
`resolved`	`CustomEvent<{ confirmed: boolean }>`	—	Fired on either outcome with the boolean result.

Confirm Dialog

Preview

Variants

API

Methods

Events

Accessibility