Modal

A dialog with two ways to use it: controlled (drive open yourself and handle onOk / onCancel) or imperative (Modal.confirm, Modal.info, … fire a self-managing modal from anywhere). The mask is not click-closable by default.

The default two-button footer places Cancel before OK in both controlled modals and Modal.confirm, with the same order for keyboard Tab navigation. The confirming button is solid primary and the dismissing button is outlined. Pass footer to customize the actions.

import { Modal } from '@jbpark/ui-kit';

const [open, setOpen] = useState(false);

<Modal
  open={open}
  title="Title"
  content="Body text"
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
/>;

Imperative

The static methods render a centered, status-styled modal and manage their own open state. Modal.confirm shows Cancel followed by OK; the others show a single acknowledge button.

Modal.confirm({
  title: 'Delete this item?',
  content: 'This action cannot be undone.',
  onOk: handleDelete,
});

Modal.success({ title: 'Saved.' });

Normal dismissal keeps the modal mounted until its closing animation finishes, including custom transition durations. onOpenChangeComplete(open) runs after an opening or closing animation completes; false indicates a completed close. For a controlled modal, keep the component mounted while changing open to false so its closing animation can finish.

Modal.destroy(id) immediately removes a specific one (each call returns an id); Modal.destroyAll() immediately removes them all, including modals currently closing. These force-removal methods skip the closing animation and do not invoke onOk, onCancel, or a pending animation-completion callback.

Props

Prop	Type	Default
open	boolean	false
title	ReactNode	-
content	ReactNode (body; children also works)	-
footer	ReactNode (null hides the footer)	-
onOk	() => void	-
onCancel	() => void	-
onOpenChangeComplete	(open: boolean) => void	-
okText	string	locale
cancelText	string	locale
closable	boolean | { closeIcon?; disabled? }	false
closeIcon	ReactNode	-
maskClosable	boolean	false
container	HTMLElement (custom portal target)	-
classNames	{ mask?; header?; body?; footer? }	-
className	string	-

Imperative methods

Method	Notes
Modal.info / success / error / warning	single acknowledge button
Modal.confirm	Cancel + OK
Modal.destroy(id) / Modal.destroyAll()	immediate removal; skips closing animation

Each imperative status renders a matching icon next to the title. Modal.info / success / error / warning set the status axis; Modal.confirm is a separate interaction mode (two-button footer), not a status.