Dialogs¶
Modal¶
Centered dialog with backdrop overlay. Use for progressive disclosure or focused tasks.
<dialog id="error-modal" class="modal" aria-labelledby="error-modal-title">
<h2 id="error-modal-title">Example details</h2>
<p>Something went wrong during the operation.</p>
<pre>Error: Connection refused...</pre>
<form method="dialog">
<button class="accent">Retry</button>
<button>Close</button>
</form>
</dialog>
Open with modal.showModal(), close with modal.close() or via <form method="dialog">.
Accessible names
Always link aria-labelledby to the dialog heading so screen readers announce the title on open.
Sizes¶
Use .modal.small for simple confirmations. Buttons are automatically sized smaller.
<dialog class="modal small">
<h2>Confirm action</h2>
<p>Are you sure you want to proceed?</p>
<form method="dialog">
<button>Cancel</button>
<button class="gradient">Confirm</button>
</form>
</dialog>