DIALOG

Portal-rendered modal with TerminalFrame chrome. Escape and backdrop click both close; pass modal={true} to disable the backdrop-close for required-choice dialogs.

Live demo

Usage

import { useState } from 'react';
import { Dialog, Button } from '@cathode-ui/react';

function ConfirmDelete() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>DELETE</Button>
      <Dialog open={open} onClose={() => setOpen(false)} title="DELETE?" accent="danger">
        <p>No undo.</p>
        <Button variant="danger" onClick={() => { /* … */ setOpen(false); }}>
          CONFIRM
        </Button>
      </Dialog>
    </>
  );
}

A11y notes

role="dialog" + aria-modal="true" set automatically.
When title is set, aria-labelledby points at it.
ESC key closes the topmost dialog.
Backdrop click closes unless modal={true}.
Focus trapping isn't built in — most Cathode dialogs are short confirmations, and pulling in a focus-trap dep for that is a bad trade. Roll your own when you need deeper modal UX.