Modal

Focus restoration

Focus returns to the trigger after closing.

Open the dialog, then close it with Escape or the overlay. Focus returns to the button that opened it.

API

Prop	Type	Default	Description
show	boolean	—	Controlled visibility.
onClose	() => void	—	Called when the user dismisses the dialog.
children	ReactNode	—	Dialog body content.
title / description	ReactNode	—	Panel header text.
modalWidth	"sm" \| "md" \| "lg" \| "xl" \| "auto" \| "full"	md	Max width (and height for `full`).
closeable	boolean	true	Whether Escape and overlay click dismiss the modal.
showCloseIcon	boolean	true	Shows the header close icon when `onClose` is provided.
scrollable	boolean	false	Scrolls long body content inside the panel.
zIndex	number	50	Stacking order for the overlay and panel.
hideHeader	boolean	false	Hides the panel header entirely.
bodyNoPadding	boolean	false	Removes default padding from the body region.
bodyClassName	string	—	Merged onto the scrollable body container.
overlayClassName	string	—	Merged onto the backdrop overlay.
className	string	—	Merged onto the panel container.
unmountOnHide	boolean	true	Remove from the DOM after the exit animation.
initialFocusRef	RefObject<HTMLElement>	—	Element to focus when the dialog opens.
onOpening / onOpened / onClosing / onClosed	() => void	—	Animation lifecycle callbacks.
footer	ReactNode	—	Footer action row via Panel.
leftIcon / rightIcons / leftDetails / rightDetails	Panel slots	—	Rich header configuration (see Panel).
leftContent / rightContent	ReactNode	—	Custom header regions flanking the title block.