React Modal Component API
Modal API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.
CModal#
import { CModal } from '@coreui/react'// orimport CModal from '@coreui/react/src/components/modal/CModal'| Property | Default | Type |
|---|---|---|
| alignment# | - | 'top', 'center' |
Align the modal in the center or top of the screen. | ||
| backdrop# | true | boolean, 'static' |
Apply a backdrop on body while modal is open. | ||
| className# | - | string |
A string of all className you want applied to the base component. | ||
| container#5.3.0+ | - | Element, DocumentFragment, (() => Element | DocumentFragment) |
Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default | ||
| focus#4.10.0+ | true | boolean |
Puts the focus on the modal when shown. | ||
| fullscreen# | - | boolean, 'sm', 'md', 'lg', 'xl', 'xxl' |
Set modal to covers the entire user viewport. | ||
| keyboard# | true | boolean |
Closes the modal when escape key is pressed. | ||
| onClose# | - | () => void |
Callback fired when the component requests to be closed. | ||
| onClosePrevented# | - | () => void |
Callback fired when the component requests to be closed. | ||
| onShow# | - | () => void |
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. | ||
| portal# | true | boolean |
Generates modal using createPortal. | ||
| scrollable# | - | boolean |
Create a scrollable modal that allows scrolling the modal body. | ||
| size# | - | 'sm', 'lg', 'xl' |
Size the component small, large, or extra large. | ||
| transition# | true | boolean |
Remove animation to create modal that simply appear rather than fade in to view. | ||
| unmountOnClose# | true | boolean |
By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | ||
| visible# | - | boolean |
Toggle the visibility of modal component. | ||
CModalBody#
import { CModalBody } from '@coreui/react'// orimport CModalBody from '@coreui/react/src/components/modal/CModalBody'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CModalFooter#
import { CModalFooter } from '@coreui/react'// orimport CModalFooter from '@coreui/react/src/components/modal/CModalFooter'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CModalHeader#
import { CModalHeader } from '@coreui/react'// orimport CModalHeader from '@coreui/react/src/components/modal/CModalHeader'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
| closeButton# | true | boolean |
Add a close button component to the header. | ||
CModalTitle#
import { CModalTitle } from '@coreui/react'// orimport CModalTitle from '@coreui/react/src/components/modal/CModalTitle'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h5'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
Component used for the root node. Either a string to use a HTML element or a component. | ||
| className# | - | string |
A string of all className you want applied to the base component. | ||