Confirmation modal driven by attributes. Resolves a boolean through confirm / cancel / resolved events. Esc cancels.
Stablewcimport '@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' | 'warning' | 'danger'
'default'
Icon and confirm-button color theme.
confirm-label
string
'Confirm'
Label of the confirm button.
cancel-label
string
'Cancel'
Label of the cancel button.
show-icon
boolean
true
Renders the variant icon above the heading.
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.
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.
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.