A handy utility in htmx is hx-confirm which allows you to let the user confirm an action.

For example you have a delete button to delete an item in a list, and you don’t want the user to lose data if accidentally pressing the button.

So you add hx-confirm, adding some confirmation text:

<ul>
  {tasks.map(task => 
    <li>
      Task: {task.name}
      <button
        hx-confirm="Are you sure?"
        hx-target="closest li"
        hx-swap="outerHTML"
        hx-delete={`/task/${task.id}`}>
        Delete
      </button>
    </li>
  )}
</ul>

(Notice I used some Astro templating to print the tasks list, to show you how I used this feature).

You can also ask for some information to the user in a prompt, using hx-prompt:

<button hx-delete="/project" hx-prompt="Enter the project name to confirm">
  Delete project
</button>

This information is sent in the HX-Prompt HTTP request header.

Lessons in this unit: