Dialog

.dialog styles HTML <dialog> elements.

Applicable Elements

• dialog

Basic Usage

<dialog class="dialog" id="dialog-element">
  <p>Hello, this is a dialog.</p>
  <form method="dialog"><button class="button">OK</button></form>
</dialog>
<button class="button" onclick="document.getElementById('dialog-element').showModal()">Open Dialog</button>

React component Advanced

<Dialog/> renders a single <dialog class="dialog" /> element in a React portal.

It has the following features:

• Visibility is controlled by the open prop. You don’t need to call showModal() or close() imperatively.
• You can specify an anchor element and use the dialog as either a modal or a popover.
• A React portal renders the dialog in front of other elements.
• Click-away handling.

Modal style

export default function DialogUsageModal() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button className="button" type="button" onClick={() => setOpen(true)}>
        Click to set open={"{true}"}
      </button>
      <Dialog
        mode="modal"
        open={open}
        onClickAway={() => { setOpen(false); }}
        onCancel={() => { setOpen(false); }}
      >
        Click away to close
      </Dialog>
    </div>
  );
}

Popover style

export default function DialogUsagePopover() {
  const buttonRef = React.useRef<HTMLButtonElement>(null);
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button ref={buttonRef} className="button" type="button" onClick={() => setOpen(true)}>
        Menu
      </button>
      <Dialog
        mode="popover"
        open={open}
        anchor={buttonRef.current}
        onClickAway={() => { setOpen(false); }}
      >
        <ul style={{ listStyle: "none", padding: 0 }}>
          <li><button type="button" className="menu-item">Buri</button></li>
          <li><button type="button" className="menu-item">Kampachi</button></li>
          <li><button type="button" className="menu-item">Iwashi</button></li>
        </ul>
      </Dialog>
    </div>
  );
}