Overlays

Modal

A centred modal dialog.

Client component6 exportsSource

Import

import { Modal, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, ModalTitle } from '@the_viveksingh/vivek-ui'

Focus, scroll lock and inert

Opening traps focus, locks body scroll without layout shift, makes the rest of the page inert, and returns focus to the trigger on close.

const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>Open dialog</Button>

<Modal open={open} onOpenChange={setOpen} title="Delete project">
  <Modal.Body>This cannot be undone.</Modal.Body>
  <Modal.Footer>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={() => setOpen(false)}>Delete</Button>
  </Modal.Footer>
</Modal>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Modal
PropTypeDefaultDescription
sizeModalSize—Panel width. `full` fills the viewport. Default `md`.

Exports

ModalModalBodyModalCloseButtonModalFooterModalHeaderModalTitle

Rendering