Axonyx UI

Overlay

AlertDialog

Focused confirmation boundary for consequential actions that must not close from an accidental backdrop click.

Next: Drawer

Destructive confirmation

Use an alert dialog only when the user must explicitly confirm or cancel.

Behavior

Escape and Cancel close the dialog, focus stays trapped inside it, and focus returns to the trigger.

Axonyx

Code
ax
<button data-ax-dialog-open="delete-project">Delete project</button>

<AlertDialog id="delete-project" title="Delete this project?">
  <Copy>This cannot be undone.</Copy>
  <button slot="action" data-ax-dialog-close="true">Confirm</button>
</AlertDialog>