Confirm Action Dialog - Everyday Interface Patterns

A destructive action opens a native dialog, waits for confirmation, then reports the confirmed result.

Program

Native dialog gives a small confirmation surface without a framework. The replay shows the opener, modal state, confirm click, and final status.

confirm_action_dialog.html

Visuals: captured from real browser rendering

<button id="delete-open" aria-haspopup="dialog">Delete project</button>
<dialog id="delete-dialog" aria-labelledby="delete-title">
  <h2 id="delete-title">Delete project?</h2>
  <p>This action needs confirmation.</p>
  <button id="cancel-delete">Cancel</button>
  <button id="confirm-delete">Delete</button>
</dialog>
<p id="delete-status" role="status">No action yet.</p>
<style>
  dialog[open] { border: 2px solid #dc2626; padding: 16px; }
</style>
<script>
  const openDelete = document.querySelector("#delete-open");
  const deleteDialog = document.querySelector("#delete-dialog");
  const confirmDelete = document.querySelector("#confirm-delete");
  const deleteStatus = document.querySelector("#delete-status");
  openDelete.addEventListener("click", () => {
    if (deleteDialog.showModal) deleteDialog.showModal();
  });
  confirmDelete.addEventListener("click", () => {
    deleteDialog.close("confirmed");
    deleteStatus.textContent = "Project delete confirmed.";
  });
</script>

Mark the opener as a dialog trigger.
The button tells users it opens a dialog.
Create the native dialog.
The confirm UI uses a native dialog element.
Name the dialog from its heading.
The dialog has a clear confirmation question.
Style the open dialog.
The open dialog has a visible warning frame.
Listen for the open click.
Clicking Delete project starts the confirm flow.
Open the dialog if supported.
The handler checks for showModal before opening.
Render the confirmed result.
The dialog closes and status text reports the confirmed action.

dialog The dialog element provides a native modal surface.

aria-labelledby aria-labelledby names the dialog from its heading.

showModal showModal opens the dialog as a modal interaction.