Holo Dialog

The <holo-dialog> component wraps the native <dialog> element, using showModal()/close() for focus trapping, the top layer, and ::backdrop styling — no hand-rolled JS focus trap needed. Esc, a backdrop click, or the close button all dismiss the dialog and return focus to whatever element triggered it.

Live Previews

Basic dialog

Open dialog

Are you sure you want to continue?

Confirm

<button id="trigger">Open dialog</button>
<holo-dialog id="dialog" heading="Confirm action">
  <p>Are you sure you want to continue?</p>
  <button slot="footer">Confirm</button>
</holo-dialog>

<script>
  trigger.addEventListener('click', () => dialog.setAttribute('open', ''));
  dialog.addEventListener('holoClose', () => dialog.removeAttribute('open'));
</script>

---

API Reference

Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | -------------------------------------------------------------------- | --------- | ----------- | | open | open | Whether the dialog is open. Calls showModal()/close() on change. | boolean | false | | heading | heading | Optional heading rendered in the dialog header. | string | undefined | | dismissible | dismissible | If true, renders a close button in the header. | boolean | true |

Events

| Event | Description | Type | | ----------- | -------------------------------------------------------------------------- | ------------------- | | holoOpen | Emitted after the dialog has opened. | CustomEvent<void> | | holoClose | Emitted after the dialog has closed and focus has returned to the trigger. | CustomEvent<void> |

Slots

| Slot | Description | | --------- | -------------------------------------- | | (default) | The dialog body content. | | footer | Action buttons rendered in the footer. |