Modal

A flexible modal dialog component for overlays, popups, and dialogs. Includes sub-components for header, body, footer, and close button.

Basic Usage

import { Modal, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, useDisclosure } from 'uiplex';

const { isOpen, onOpen, onClose } = useDisclosure();

<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose} size="md">
  <ModalHeader>
    <h2>Modal Title</h2>
    <ModalCloseButton onClose={onClose} />
  </ModalHeader>
  <ModalBody>
    <p>Modal content goes here</p>
  </ModalBody>
  <ModalFooter>
    <Button variant="secondary" onClick={onClose}>Cancel</Button>
    <Button variant="primary" onClick={onClose}>Confirm</Button>
  </ModalFooter>
</Modal>

Sizes

<Modal isOpen={isOpen} onClose={onClose} size="sm">...</Modal>
<Modal isOpen={isOpen} onClose={onClose} size="md">...</Modal>
<Modal isOpen={isOpen} onClose={onClose} size="lg">...</Modal>
<Modal isOpen={isOpen} onClose={onClose} size="xl">...</Modal>
<Modal isOpen={isOpen} onClose={onClose} size="full">...</Modal>

Without Close Button

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalHeader>
    <h2>Modal Title</h2>
    {/* No ModalCloseButton */}
  </ModalHeader>
  <ModalBody>...</ModalBody>
</Modal>

Custom Content

<Modal isOpen={isOpen} onClose={onClose} size="lg">
  <ModalHeader>
    <h2>Custom Modal</h2>
    <ModalCloseButton onClose={onClose} />
  </ModalHeader>
  <ModalBody>
    <div>
      <h3>Custom Section</h3>
      <p>Any content can go here</p>
      <ul>
        <li>List items</li>
      </ul>
    </div>
  </ModalBody>
  <ModalFooter>
    <Button onClick={onClose}>Close</Button>
  </ModalFooter>
</Modal>

Options

The Modal component supports several options to customize behavior:

closeOnOverlayClick: Close modal when clicking outside (default: true)
closeOnEsc: Close modal when pressing Escape key (default: true)
isCentered: Center the modal vertically (default: true)

<Modal
  isOpen={isOpen}
  onClose={onClose}
  closeOnOverlayClick={false}
  closeOnEsc={true}
  isCentered={true}
>
  ...
</Modal>

API Reference

Component	Prop	Type	Default	Description
Modal	isOpen	boolean	-	Whether the modal is open
	onClose	() => void	-	Function called when modal should close
	size	"sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	Size of the modal
	closeOnOverlayClick	boolean	true	Close when clicking overlay
	closeOnEsc	boolean	true	Close when pressing Escape
	isCentered	boolean	true	Center modal vertically
	children	React.ReactNode	-	Modal content (usually ModalHeader, ModalBody, ModalFooter)
ModalHeader	children	React.ReactNode	-	Header content
ModalBody	children	React.ReactNode	-	Main content area
ModalFooter	children	React.ReactNode	-	Footer content (usually buttons)
ModalCloseButton	onClose	() => void	-	Function called when close button is clicked