Modal

The dialog renders at the end of <body>, so no overflow: hidden ancestor clips it. It traps focus and returns it on close; Escape, the backdrop and the header's close button close it, and onOpenChange reports that. The header names the dialog; any element inside with data-bs-dismiss="modal" closes it.

Basic usage

Scrollable, centred

Source

import { BsModal } from '@mintplayer/react-bootstrap/modal';const [open, setOpen] = useState(false);<button type="button" className="btn btn-primary" onClick={() => setOpen(true)}>Show modal</button><BsModal  open={open}  onOpenChange={setOpen}  header="Modal title"  footer={<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>}>  Place any content here — forms, lists, embedded components.</BsModal>