Modal

Dialog overlay rendered in a portal. Features entry/exit animations, scroll lock, backdrop click, and Escape key support.

Playground

title

size

Hide close ×

Close on backdrop

rounded

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

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

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="My Modal"
>
  <p>Modal body content.</p>
</Modal>

Basic

With Footer

Pass footer prop to render action buttons at the bottom.

Sizes

sm, md (default), lg, xl, full.

Close on Backdrop

closeOnBackdrop (default true) controls whether clicking outside the modal closes it. Toggle the switch inside the modal to try it live.

No Backdrop Close

Set closeOnBackdrop={false} to prevent closing on backdrop click. Useful for critical confirmations.

API

Property	Type	Default	Description
`open`*	`boolean`	—	Controls visibility
`onClose`*	`() => void`	—	Called when the user closes the modal
`title`	`ReactNode`		Modal title shown in the header
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	"md"	Width preset
`footer`	`ReactNode`		Content rendered in the footer area
`closeOnBackdrop`	`boolean`	true	Close when clicking the backdrop
`closeOnEscape`	`boolean`	true	Close on Escape key
`hideCloseButton`	`boolean`	false	Hide the × button in the header
`className`	`string`		Extra class on the modal panel
`bodyClassName`	`string`		Extra class on the body area