Interactive Elements

Dialogs New in 4.0.0

Use the <dialog> element for a dialog box or other interactive component, such as an alert.

This is a dialog

<dialog id="dialog">
    <form method="dialog">
        <p>This is a dialog</p>
        <button value="cancel">Close dialog</button>
    </form>
</dialog>
<button id="showDialog">Show dialog</button>

document.getElementById('showDialog').addEventListener("click", () => {
  document.getElementById('dialog').showModal()
})

Property Name (global/local)	Description
--hiq-dialog-border-radius --dialog-border-radius	Sets the border radius for dialog elements.

WARNING

The dialog element currently has limited browser support.