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>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-confirm-dialog';

@Component({
  selector: 'app-confirm-dialog-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class ConfirmDialogDemo {}

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>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-confirm-dialog';

@Component({
  selector: 'app-confirm-dialog-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class ConfirmDialogDemo {}

API

Methods

Events

Accessibility

• The panel is role="alertdialog" with aria-modal="true"; heading is the accessible name.
• The confirm button receives focus on open; Tab and Shift+Tab cycle between the two buttons.
• Escape and backdrop click both resolve as cancel; focus is restored on close.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-confirm-dialog is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.