Function Modal

Dialog overlay built on 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>. Open state works uncontrolled (defaultOpen, or a command="show-modal" invoker button) or controlled (open + onOpenChange).

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