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.

No Backdrop Close

Set closeOnBackdrop={false} to prevent closing on backdrop click.

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