Corex UI
Pagination
Date Picker
Editable

# Dialog

A pure HTML and vanilla JS implementation of Zag JS Dialog

A dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.

# Anatomy

The Dialog component consists of the following data parts:

trigger, backdrop, positioner, content, title, description, close-trigger

 <div class="dialog dialog-js">
                        <button data-part="trigger" aria-label="Open dialog">
                            Open Dialog
                        </button>
                        <div data-part="backdrop"></div>
                        <div data-part="positioner">
                            <div data-part="content">
                               <div data-part="row">
                                <h3 data-part="title">Title</h3>
                                <button data-part="close-trigger" aria-label="Close dialog">
                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                                </div>
                                <p data-part="description">Description</p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                        Consectetur adipiscing elit. Sed sodales ullamcorper tristique. Proin quis risus
                                        feugiat tellus iaculis fringilla.
                                </p>
                            </div>
                        </div>
                    </div>

# Data attributes

Each dialog can be set with different settings with the following data-attribute.

 <div class="dialog dialog-js"
                     id="custom-dialog" data-aria-label="My dialog title" data-default-open="false" data-dir="ltr" data-modal="true" data-prevent-scroll="false" data-restore-focus="false" data-trap-focus="true" data-close-on-interact-outside="false" data-close-on-escape="true" data-role="dialog">
                            <button data-part="trigger" aria-label="Open dialog">
                            Open Dialog
                        </button>
                        <div data-part="backdrop"></div>
                        <div data-part="positioner">
                            <div data-part="content">
                               <div data-part="row">
                                <h3 data-part="title">Title</h3>
                                <button data-part="close-trigger" aria-label="Close dialog">
                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                                </div>
                                <p data-part="description">Description</p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                        Consectetur adipiscing elit. Sed sodales ullamcorper tristique. Proin quis risus
                                        feugiat tellus iaculis fringilla.
                                </p>
                            </div>
                        </div>
                    </div>

id
Type: string
Description: The unique id of the component. Default generated if none is provided.

data-default-open
Type: string
Description: The initial open state of the dialog.

data-value
Type: string
Description: The controlled open state of the dialog.

data-dir
Type: ltr | rtl
Description: The orientation of the dialog. Can be ltr or rtl.

data-aria-label
Type: string
Description: Human readable label for the dialog, in event the dialog title is not rendered.

data-modal
Type: boolean
Description: Whether to prevent pointer interaction outside the element and hide all content below it.

data-open
Type: boolean
Description: The controlled open state of the dialog.

data-prevent-scroll
Type: boolean
Description: Whether to prevent scrolling behind the dialog when it's opened.

data-restore-focus
Type: boolean
Description: Whether to restore focus to the element that had focus before the dialog was opened.

data-trap-focus
Type: boolean
Description: Whether to trap focus inside the dialog when it's opened.

data-close-on-interact-outside
Type: boolean
Description: Whether to close the dialog when interacting outside it.

data-close-on-escape
Type: boolean
Description: Whether to close the dialog when the escape key is pressed.

data-role
Type: "dialog" | "alertdialog"
Description: The dialog's role.

# Event Callbacks

Each dialog component can receive callbacks that can be used to respond to user interaction with custom behavior.

You must add a custom id and an event listener for your event name

document.getElementById("my-dialog")
                    ?.addEventListener("my-dialog-event", (event) => {
                    console.log("Received event:", (event as CustomEvent).detail);
                    });
                    
 <div id="my-dialog" class="dialog dialog-js" data-on-open-change="my-dialog-event">
                            <button data-part="trigger" aria-label="Open dialog">
                            Open Dialog
                        </button>
                        <div data-part="backdrop"></div>
                        <div data-part="positioner">
                            <div data-part="content">
                               <div data-part="row">
                                <h3 data-part="title">Title</h3>
                                <button data-part="close-trigger" aria-label="Close dialog">
                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                                </div>
                                <p data-part="description">Description</p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                                        Consectetur adipiscing elit. Sed sodales ullamcorper tristique. Proin quis risus
                                        feugiat tellus iaculis fringilla.
                                </p>
                            </div>
                        </div>
                    </div>

Open your browser's console to see the events received when you open or close the above dialog

data-on-open-change
Type: string
Description: Event name to send when the dialog's open state changes.

# API

You can interact with the Accordion API by dispatching custom events.

<button data-action="dialog-set-open" data-value="true" class="button"> Open Dialog</button>
                    <div id="dialog-api" class="dialog dialog-js">
                        <div data-part="backdrop"></div>
                        <div data-part="positioner">
                            <div data-part="content">
                                <div data-part="row">
                                    <h3 data-part="title">Title</h3>
                                    <button data-part="close-trigger" aria-label="Close dialog">
                                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                                        </svg>
                                    </button>
                                </div>
                                <p data-part="description">Description</p>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Consectetur adipiscing elit. Sed sodales ullamcorper tristique. Proin quis risus
                                    feugiat tellus iaculis fringilla.
                                </p>
                                <div class="flex justify-between">
                                    <button data-action="dialog-set-open" data-value="false" class="button">Cancel</button>
                                    <button data-action="dialog-set-open" data-value="false" class="button button--accent">Confirm</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
const dialogState = document.getElementById("dialog-api");
                    if (dialogState) {
                      const buttons = document.querySelectorAll<HTMLButtonElement>(
                        'button[data-action="dialog-set-open"]'
                      );
                      buttons.forEach((button) => {
                        button.addEventListener("click", () => {
                          const value = button.dataset.value;
                          if (value !== undefined) {
                            const boolValue = value === "true";
                            dialogState.dispatchEvent(
                              new CustomEvent("dialog:set-open", {
                                detail: { value: boolValue },
                              })
                            );
                          }
                        });
                      });
                    
                    } else {
                      console.warn("Element with ID 'dialog-api' not found");
                    }

dialog:set-open
Type: boolean
Description: Sets the open state of the dialog

dialog:open
Type: callback
Description: Get the current open state of the dialog

# Installation

First, complete the Corex UI initial installation guide for your platform, bundler, or framework.

# Static

  1. Import the Dialog component
import "@corex-ui/static/components/dialog"

This will automatically initialize all elements with class="dialog-js" and add the necessary interaction behavior.

  1. Add styling

To apply the default Corex UI design system styles, import the stylesheet:

@import "@corex-ui/design/components/dialog.css";

Then apply the base class along with any desired modifiers:

<div class="dialog dialog-js">
                      <div data-part="root">
                        <button data-part="trigger"></button>
                        <div data-part="positioner">
                          <div data-part="content"></div>
                        </div>
                      </div>
                    </div>

# Static React

Experimental! Only works with React static export (eg. Next.js SSG.)

  1. Import the Dialog component
import { Dialog } from '@corex-ui/static/react';
                    export default function Home() {
                      return (
                        <Dialog>
                          <div data-part="root">
                            <button data-part="trigger" />
                            <div data-part="positioner">
                              <div data-part="content" />
                            </div>
                          </div>
                        </Dialog>
                      );
                    }
  1. Add styling

To apply the default Corex UI design system styles, import the stylesheet:

@import "@corex-ui/design/components/dialog.css";

Then apply the base class along with any desired modifiers:

  <Dialog className="dialog">
                        {/* content */}
                      </Dialog>