import { CModal } from '@coreui/react'// orimport CModal from '@coreui/react/src/components/modal/CModal'| Property | Description | Type | Default |
|---|---|---|---|
| alignment | Align the modal in the center or top of the screen. | 'top' | 'center' | - |
| backdrop | Apply a backdrop on body while modal is open. | boolean | 'static' | true |
| className | A string of all className you want applied to the base component. | string | - |
| focus v4.10.0+ | Puts the focus on the modal when shown. | boolean | true |
| fullscreen | Set modal to covers the entire user viewport. | boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | - |
| keyboard | Closes the modal when escape key is pressed. | boolean | true |
| onClose | Callback fired when the component requests to be closed. | () => void | - |
| onClosePrevented | Callback fired when the component requests to be closed. | () => void | - |
| onShow | Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. | () => void | - |
| portal | Generates modal using createPortal. | boolean | true |
| scrollable | Create a scrollable modal that allows scrolling the modal body. | boolean | - |
| size | Size the component small, large, or extra large. | 'sm' | 'lg' | 'xl' | - |
| transition | Remove animation to create modal that simply appear rather than fade in to view. | boolean | true |
| unmountOnClose | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | true |
| visible | Toggle the visibility of modal component. | boolean | - |
On this page