Dialog

<rhx-button rhx-variant="brand"
            data-rhx-dialog-open="demo-dialog">
    Open Dialog
</rhx-button>

<rhx-dialog id="demo-dialog" rhx-label="Example Dialog">
    <p>This is a basic dialog with a title and close button.</p>
    <p>Press ESC or click the close button to dismiss.</p>
</rhx-dialog>

<rhx-button data-rhx-dialog-open="confirm-dialog">
    Open Headerless Dialog
</rhx-button>

<rhx-dialog id="confirm-dialog" rhx-no-header="true">
    <p>Are you sure you want to proceed?</p>
    <rhx-button rhx-variant="neutral"
                onclick="this.closest('dialog').close()">
        Cancel
    </rhx-button>
    <rhx-button rhx-variant="brand"
                onclick="this.closest('dialog').close()">
        Confirm
    </rhx-button>
</rhx-dialog>

<rhx-button rhx-variant="brand"
            data-rhx-dialog-open="edit-dialog">
    Open Dialog with Footer
</rhx-button>

<rhx-dialog id="edit-dialog" rhx-label="Edit Profile">
    <rhx-input rhx-label="Display Name"
               rhx-placeholder="Enter name"
               name="displayName" />

    <rhx-dialog-footer>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined"
                    onclick="this.closest('dialog').close()">
            Cancel
        </rhx-button>
        <rhx-button rhx-variant="brand"
                    onclick="this.closest('dialog').close()">
            Save Changes
        </rhx-button>
    </rhx-dialog-footer>
</rhx-dialog>

<rhx-button rhx-variant="brand"
            hx-get="/Docs/Components/Dialog?handler=EditForm"
            hx-target="#htmx-dialog .rhx-dialog__body"
            data-rhx-dialog-open="htmx-dialog">
    Edit Profile
</rhx-button>

<rhx-dialog id="htmx-dialog" rhx-label="Edit Profile">
    <p>Loading...</p>
</rhx-dialog>