Skip to content
aidsgnaidsgnaidsgn

Dialog

aidsgn-dialog presents a focused decision or short task in the native modal top layer. The browser owns focus containment, Escape behavior, background inertness, and focus restoration.

Delete project

This action cannot be undone.

<aidsgn-dialog id="delete-dialog" heading="Delete project">
<dialog class="aidsgn-modal aidsgn-dialog" aria-labelledby="dialog-heading">
  <div class="aidsgn-modal__surface"><header class="aidsgn-modal__header"><h2 class="aidsgn-modal__heading" id="dialog-heading">Delete project</h2><button class="aidsgn-modal__close" type="button" aria-label="Close dialog">×</button></header><div class="aidsgn-modal__body"><p>This action cannot be undone.</p><form method="dialog" data-aidsgn-modal-actions><button value="cancel">Cancel</button><button value="delete">Delete project</button></form></div></div>
</dialog>
</aidsgn-dialog>

Set open declaratively or call show(). Call close(returnValue) to dismiss it programmatically. Author the native dialog heading and close button; close-label localizes that control.

Clicking the close button or backdrop, pressing Escape, and submitting a descendant <form method="dialog"> close the modal. aidsgn-close bubbles with its reason and native returnValue. Prevent the cancelable aidsgn-cancel event only when Escape would discard important work.

Holding the authored close button applies shared Press feedback without changing its 44px target. Reduced motion suppresses the scale.

Dialog is centered and bounded by --aidsgn-dialog-max-inline-size, which defaults to 36rem. Long content scrolls inside the body while the header remains visible.

Usage guidelines

Section titled “Usage guidelines”
A Dialog titled Delete project asks for a concise destructive decision with Cancel and Delete project actions.A Dialog titled Delete project asks for a concise destructive decision with Cancel and Delete project actions.
Do

Require a focused response

Use Dialog for a concise decision or short task that needs attention before the page can continue.

A Dialog has the clear heading Rename project and a focused Project name field.A Dialog has the clear heading Rename project and a focused Project name field.
Do

Orient focus immediately

Provide a clear heading and move initial focus to a useful control inside the Dialog.

A simulated modal interrupts the page only to display the passive message Your report is ready.A simulated modal interrupts the page only to display the passive message Your report is ready.
Don’t

Avoid passive information

Keep supporting information in the page flow when it does not need to interrupt the current task.

A smaller confirmation Dialog is incorrectly stacked over an already open settings Dialog.A smaller confirmation Dialog is incorrectly stacked over an already open settings Dialog.
Don’t

Never nest or trap dialogs

Open one Dialog at a time and retain a visible dismissal path so people can leave predictably.