Modal

A native <dialog>-backed overlay. Compose ModalHeader / ModalBody / ModalFooter as children for the .modal-header / .modal-body / .modal-footer regions — Modal finds .modal-title and .modal-close by class name, so it doesn’t need title/footer props of its own.

open is fully controlled: your onClose callback is called on the close button, a backdrop click, or Escape, and it’s up to you to actually flip open to false — not doing so vetoes the close.

Usage


import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from '@mav-labs-inc/mavkit-react'
 
const [isOpen, setIsOpen] = useState(false)
 
<Modal open={isOpen} onClose={() => setIsOpen(false)}>
  <ModalHeader>My Modal</ModalHeader>
  <ModalBody>
    <p>Modal content goes here.</p>
  </ModalBody>
  <ModalFooter>
    <Button className="modal-action modal-action--primary">Save</Button>
  </ModalFooter>
</Modal>

Example

Props

Prop	Type	Default	Description
open*	boolean	—	Controlled open state. The modal animates closed when this flips to false.
onClose	() => void	—	Called when the user attempts to close (close button, backdrop, ESC). Set open to false here to actually close — not doing so vetoes the close.
bare	boolean	false	Renders via dialog.show() instead of showModal() — no backdrop, no body scroll lock, no native focus trap.
fullHeight	boolean	false	Stretch the modal to the full viewport height.
fullWidth	boolean	false	Stretch the modal to the full viewport width.
fixed	boolean	false	Pin the modal to a fixed position rather than centering.
className	string	—	Extra class names for the <dialog> element.
children	ReactNode	—

ModalHeader

Prop	Type	Default	Description
closeLabel	string	'Close'	aria-label for the generated .modal-close (×) button.
hideClose	boolean	false	Omit the .modal-close (×) button.
children	ReactNode	—	Rendered as the .modal-title.

Also accepts every native <div> attribute.

ModalBody / ModalFooter

Thin wrappers rendering a <div> with .modal-body / .modal-footer — accept every native <div> attribute, no extra props of their own.