Dialog

Modal Dialog And Edge Sheet - Focus-Trapped, Scrim, Square Panel

01 Preview

02 Usage

Modal dialog or edge sheet over a warm-black scrim. Solid raised panel, square corners, --shadow-overlay. Traps focus, restores it on close, closes on Escape or backdrop click, and locks body scroll. Controlled — you own open.

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open</Button>
<Dialog open={open} onClose={() => setOpen(false)} title="Confirm">
  <p>Body content. Buttons, forms, anything.</p>
</Dialog>

// Edge sheet — the mobile-nav drawer idiom:
<Dialog open={menu} onClose={() => setMenu(false)} side="left" title="Menu">
  <nav>…</nav>
</Dialog>

side: center | left | right. Names itself from title; pass aria-label when there is no visible title. Set showClose={false} for a bare panel, closeOnBackdrop={false} / closeOnEsc={false} to require an explicit action.

03 Props

Prop	Type	Default	Notes
open	`boolean`	`false`	Whether the dialog is shown. Controlled — the caller owns the state.
onClose	`() => void`	—	Called on Escape, a backdrop click, or the close control. Wire it to your open state.
showClose	`boolean`	`true`	Show the × close control in the title bar.
closeOnBackdrop	`boolean`	`true`	Close when the backdrop is clicked.
closeOnEsc	`boolean`	`true`	Close on the Escape key.
children	`React.ReactNode`	—	—

Also accepts every attribute of Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Dialog } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';