Function Modal

Controlled dialog overlay. Driven by the open prop via the native <dialog> element and the modal enhancer, which adds a focus trap, body scroll-lock, and a background inert barrier. Compose with <ModalHeader>, <ModalBody>, and <ModalFooter>. Wire onOpenChange so Escape and backdrop clicks can update your state.

<Modal open={open} onOpenChange={setOpen}>
  <ModalHeader>Confirm</ModalHeader>
  <ModalBody>Are you sure?</ModalBody>
  <ModalFooter><Button onClick={() => setOpen(false)}>Close</Button></ModalFooter>
</Modal>
Copy