@confirm

Ask before continuing (htmx’s hx-confirm). Returns the boolean from window.confirm, so && short-circuits the rest of the expression.

Syntax

@confirm('Delete this item?') && @delete('/items/' + $id)

Guard a destructive action

delete with confirmation

Delete gone. undo

<div data-signals="{ deleted: false }" class="row">
  <button data-on:click="@confirm('Really delete?') && ($deleted = true)" data-show="!$deleted">Delete</button>
  <span data-show="$deleted">gone. <button data-on:click="$deleted = false">undo</button></span>
</div>

Build the message from signals

dynamic message

clear items refill

<div data-signals="{ items: ['a', 'b', 'c'] }" class="row">
  <button data-on:click="@confirm('Remove ' + $items.length + ' items?') && ($items = [])">clear <span data-text="$items.length"></span> items</button>
  <button data-on:click="$items = ['a', 'b', 'c']">refill</button>
</div>

Notes

window.confirm is already callable inside expressions; @confirm exists so the intent reads clearly in markup and so the auto-mode scanner can see it. Guard a request the same way: @confirm('Send?') && @post('/send').

Register

import { confirm } from 'sigmx/plugins'

Registering confirm adds 16 bytes brotli (57 gzip, 106 minified) on top of the core. See bundle sizes.