Confirm action

The custom element is <hui-confirm-action>.

Overview

Wraps a server-rendered action and asks for confirmation before letting it through. An accepted click passes on untouched; a declined one is stopped before any host or HTMX handler sees it.

Example

Guard a delete button

Source

<hui-confirm-action message="Delete this item?">
  <button type="button">Delete</button>
</hui-confirm-action>

The Go template that renders it:

<hui-confirm-action message="Delete this item?">
  <button type="button">Delete</button>
</hui-confirm-action>

API

Attributes1

Attributes
Name	Type	Default	Description
`message`	`string`	`"Are you sure?"`	The text shown in the native `window.confirm()` dialog. Read at click time, so it may change while the element is connected.

Events3

Events
Name	Description
`hui-confirm`	Fired after the user accepts. It `bubbles` and is `composed`, is not `cancelable`, and carries no `detail`. The original click is left alone and continues to the host.
`hui-cancel`	Fired after the user declines. It `bubbles` and is `composed`, is not `cancelable`, and carries no `detail`. The original click is also `preventDefault()`-ed and its immediate propagation stopped.
`click`	The native click from the wrapped control. The element listens during the capture phase, so confirmation runs before any handler the host attached to the same event.

Slots1

Slots
Name	Description
`(default)`	The control to guard: a button, link or submit control the Go host already rendered. The element intercepts its clicks and renders nothing itself.

States

Default message

With no message, the element asks in its own words before the wrapped action runs.

Default message

Source

<hui-confirm-action>
  <button type="button">Archive</button>
</hui-confirm-action>

Guard a link

The same guard around a link: cancelling stops the navigation.

Guard a link

Source

<hui-confirm-action message="Leave this page?">
  <a href="#">Leave</a>
</hui-confirm-action>

Server-side mechanics

The host wraps a control it already rendered - a delete button, a submit button, a link - inside hui-confirm-action, and the element reads the confirmation text from its message attribute at click time, defaulting to Are you sure?. It is not form-associated and submits no value of its own; there is no name, so the wrapped control's own name and value are what reach the server. It renders nothing, so the server must send the control as its slotted content. An hx-swap that replaces the markup creates a fresh element that re-registers its capture-phase click listener on connect; a click inside it is guarded against re-entry while the dialog is open, a declined click is stopped before any host or HTMX handler runs, and an accepted one passes through untouched.

Accessibility

The confirmation is the browser's own modal window.confirm(), announced with platform dialog semantics while it holds focus.
On acceptance the click continues unchanged, so submit buttons and links behave exactly as they would without the element.
On dismissal the click is stopped before the host handler runs, so a guarded destructive action cannot fire from a stray click.
A dialog already open blocks re-entry, so a rapid double activation cannot open a second confirmation.

Keyboard

Keyboard
Keys	Action
`Enter, Space`	Activate the wrapped button or link, which opens the confirmation dialog through the native click.
`Enter, Escape`	Accept or dismiss the native `window.confirm()` dialog. Focus returns to the page once it closes.

Gotchas

It declares no observedAttributes and exposes no public properties or methods; message is read lazily with getAttribute at click time, so there is nothing to set programmatically.
It only intercepts clicks whose target is inside itself, during the capture phase, and guards re-entry while a dialog is open, so a rapid double activation cannot open a second confirmation.
hui-confirm and hui-cancel bubble and are composed but are not cancelable and carry no detail, so a handler cannot veto the action or read the choice from the event.
It consumes no --hui-* token directly.