Modal
The Modal component lets you create dialogs, popovers, lightboxes, and other elements that force the user to take action before continuing.
useModal API
Import
import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
// or
import { unstable_useModal as useModal } from '@mui/base';When set to true the Modal waits until a nested Transition is completed before closing.
Type:boolean
Default:false
An HTML element or function that returns one. The container will have the portal children appended to it.
You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.
By default, it uses the body of the top-level document object, so it's simply document.body most of the time.
Type:PortalProps['container']
If true, hitting escape will not fire the onClose callback.
Type:boolean
Default:false
Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.
Type:{
bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void
}['bivarianceHack']
If true, the exiting transition finished (to be used for unmounting the component).
Type:boolean
Resolver for the backdrop slot's props.
Type:<TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalBackdropSlotProps<TOther>
Resolver for the root slot's props.
Type:<TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalRootSlotProps<TOther>
Resolver for the transition related props.
Type:<TOther extends EventHandlers = {}>(externalProps?: TOther) => { onEnter: () => void; onExited: () => void }