Dialog

The Dialog component provides a lightweight and semantic way to display modal content using the native HTML <dialog> element.

Ignix Lite dialogs support intent variants, accessible focus management, and clean modal interactions without requiring JavaScript frameworks or external dependencies.

---

Preview

Preview

Confirm Delete

Are you sure you want to delete this item?

This action cannot be undone.

Unsaved Changes

You have unsaved changes.

Leaving now may result in data loss.

Session Expiring

Your session will expire in 2 minutes.

Save your work before continuing.

Code

<button onclick="document.querySelector('#confirmDialog').showModal()">
  Delete Item
</button>

<dialog id="confirmDialog" data-intent="danger">

  <h2>Confirm Delete</h2>

  <p>Are you sure you want to delete this item?</p>

  <p>This action cannot be undone.</p>

  <footer data-actions>

    <button onclick="document.querySelector('#confirmDialog').close()">
      Cancel
    </button>

    <button
      data-intent="danger"
      onclick="document.querySelector('#confirmDialog').close()"
    >
      Delete
    </button>

  </footer>

</dialog>

Usage

Preview

Dialog Title

This is a simple dialog example.

Code

<button onclick="document.querySelector('#myDialog').showModal()">
  Open Dialog
</button>

<dialog id="myDialog">

  <h2>Dialog Title</h2>

  <p>
    This is a simple dialog example.
  </p>

  <footer data-actions>

    <button onclick="document.querySelector('#myDialog').close()">
      Cancel
    </button>

    <button
      data-intent="primary"
      onclick="document.querySelector('#myDialog').close()"
    >
      Confirm
    </button>

  </footer>

</dialog>

---

Attributes

Attribute	Type	Description
data-intent	'danger' | 'warning' | 'info'	Applies semantic styling to the dialog border and background
data-actions	attribute on <footer>	Wraps action buttons in a semantic footer action row
data-intent on <button>	'danger' | 'warning' | 'primary' | 'success'	Colors an individual action button independently
open	boolean	Native dialog open state
id	string	Unique dialog identifier for JS targeting
showModal()	method	Opens the dialog as a modal with backdrop
close()	method	Closes the dialog