CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Below is a static react modal component example (meaning its position
and display
have been overridden). Included are the modal header, modal body (required for padding
), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
1<CModal2 className="show d-block position-static"3 backdrop={false}4 keyboard={false}5 portal={false}6 visible7>8 <CModalHeader>9 <CModalTitle>React Modal title</CModalTitle>10 </CModalHeader>11 <CModalBody>React Modal body text goes here.</CModalBody>12 <CModalFooter>13 <CButton color="secondary">Close</CButton>14 <CButton color="primary">Save changes</CButton>15 </CModalFooter>16</CModal>
Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>5 <CModal visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader onClose={() => setVisible(false)}>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>10 <CModalFooter>11 <CButton color="secondary" onClick={() => setVisible(false)}>12 Close13 </CButton>14 <CButton color="primary">Save changes</CButton>15 </CModalFooter>16 </CModal>17 </>18)
If you set a backdrop
to static
, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>5 <CModal visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>10 I will not close if you click outside me. Don't even try to press escape key.11 </CModalBody>12 <CModalFooter>13 <CButton color="secondary" onClick={() => setVisible(false)}>14 Close15 </CButton>16 <CButton color="primary">Save changes</CButton>17 </CModalFooter>18 </CModal>19 </>20)
When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>5 <CModal visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>10 <p>11 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis12 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.13 </p>14 <p>15 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus16 vel augue laoreet rutrum faucibus dolor auctor.17 </p>18 <p>19 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel20 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus21 auctor fringilla.22 </p>23 <p>24 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis25 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.26 </p>27 <p>28 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus29 vel augue laoreet rutrum faucibus dolor auctor.30 </p>31 <p>32 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel33 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus34 auctor fringilla.35 </p>36 <p>37 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis38 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.39 </p>40 <p>41 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus42 vel augue laoreet rutrum faucibus dolor auctor.43 </p>44 <p>45 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel46 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus47 auctor fringilla.48 </p>49 <p>50 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis51 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.52 </p>53 <p>54 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus55 vel augue laoreet rutrum faucibus dolor auctor.56 </p>57 <p>58 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel59 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus60 auctor fringilla.61 </p>62 <p>63 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis64 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.65 </p>66 <p>67 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus68 vel augue laoreet rutrum faucibus dolor auctor.69 </p>70 <p>71 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel72 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus73 auctor fringilla.74 </p>75 <p>76 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis77 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.78 </p>79 <p>80 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus81 vel augue laoreet rutrum faucibus dolor auctor.82 </p>83 <p>84 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel85 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus86 auctor fringilla.87 </p>88 </CModalBody>89 <CModalFooter>90 <CButton color="secondary" onClick={() => setVisible(false)}>91 Close92 </CButton>93 <CButton color="primary">Save changes</CButton>94 </CModalFooter>95 </CModal>96 </>97)
You can also create a scrollable react modal component that allows scroll the modal body by adding scrollable
prop.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>5 <CModal scrollable visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>10 <p>11 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis12 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.13 </p>14 <p>15 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus16 vel augue laoreet rutrum faucibus dolor auctor.17 </p>18 <p>19 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel20 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus21 auctor fringilla.22 </p>23 <p>24 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis25 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.26 </p>27 <p>28 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus29 vel augue laoreet rutrum faucibus dolor auctor.30 </p>31 <p>32 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel33 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus34 auctor fringilla.35 </p>36 <p>37 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis38 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.39 </p>40 <p>41 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus42 vel augue laoreet rutrum faucibus dolor auctor.43 </p>44 <p>45 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel46 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus47 auctor fringilla.48 </p>49 <p>50 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis51 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.52 </p>53 <p>54 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus55 vel augue laoreet rutrum faucibus dolor auctor.56 </p>57 <p>58 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel59 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus60 auctor fringilla.61 </p>62 <p>63 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis64 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.65 </p>66 <p>67 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus68 vel augue laoreet rutrum faucibus dolor auctor.69 </p>70 <p>71 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel72 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus73 auctor fringilla.74 </p>75 <p>76 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis77 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.78 </p>79 <p>80 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus81 vel augue laoreet rutrum faucibus dolor auctor.82 </p>83 <p>84 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel85 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus86 auctor fringilla.87 </p>88 </CModalBody>89 <CModalFooter>90 <CButton color="secondary" onClick={() => setVisible(false)}>91 Close92 </CButton>93 <CButton color="primary">Save changes</CButton>94 </CModalFooter>95 </CModal>96 </>97)
Add alignment="center
to <CModal>
to vertically center the React modal.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>5 <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>10 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,11 egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.12 </CModalBody>13 <CModalFooter>14 <CButton color="secondary" onClick={() => setVisible(false)}>15 Close16 </CButton>17 <CButton color="primary">Save changes</CButton>18 </CModalFooter>19 </CModal>20 </>21)
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>5 <CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>10 <p>11 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis12 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.13 </p>14 <p>15 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus16 vel augue laoreet rutrum faucibus dolor auctor.17 </p>18 <p>19 Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel20 scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus21 auctor fringilla.22 </p>23 <p>24 Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis25 in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.26 </p>27 <p>28 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus29 vel augue laoreet rutrum faucibus dolor auctor.30 </p>31 </CModalBody>32 <CModalFooter>33 <CButton color="secondary" onClick={() => setVisible(false)}>34 Close35 </CButton>36 <CButton color="primary">Save changes</CButton>37 </CModalFooter>38 </CModal>39 </>40)
<CTooltips>
and <CPopovers>
can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed.
1const [visible, setVisible] = useState(false)2return (3 <>4 <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>5 <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>6 <CModalHeader>7 <CModalTitle>Modal title</CModalTitle>8 </CModalHeader>9 <CModalBody>10 <h5>Popover in a modal</h5>11 <p>12 This13 <CPopover title="Popover title" content="Popover body content is set in this property.">14 <CButton>button</CButton>15 </CPopover> triggers a popover on click.16 </p>17 <hr />18 <h5>Tooltips in a modal</h5>19 <p>20 <CTooltip content="Tooltip">21 <CLink>This link</CLink>22 </CTooltip>{' '}23 and24 <CTooltip content="Tooltip">25 <CLink>that link</CLink>26 </CTooltip> have tooltips on hover.27 </p>28 </CModalBody>29 <CModalFooter>30 <CButton color="secondary" onClick={() => setVisible(false)}>31 Close32 </CButton>33 <CButton color="primary">Save changes</CButton>34 </CModalFooter>35 </CModal>36 </>37)
Modals have three optional sizes, available via modifier classes to be placed on a <CModal>
. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Size | Property size | Modal max-width |
---|---|---|
Small | 'sm' | 300px |
Default | None | 500px |
Large | 'lg' | 800px |
Extra large | 'xl' | 1140px |
1const [visibleXL, setVisibleXL] = useState(false)2const [visibleLg, setVisibleLg] = useState(false)3const [visibleSm, setVisibleSm] = useState(false)4return (5 <>6 <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>7 <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>8 <CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>9 <CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>10 <CModalHeader>11 <CModalTitle>Extra large modal</CModalTitle>12 </CModalHeader>13 <CModalBody>...</CModalBody>14 </CModal>15 <CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>16 <CModalHeader>17 <CModalTitle>Large modal</CModalTitle>18 </CModalHeader>19 <CModalBody>...</CModalBody>20 </CModal>21 <CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>22 <CModalHeader>23 <CModalTitle>Small modal</CModalTitle>24 </CModalHeader>25 <CModalBody>...</CModalBody>26 </CModal>27 </>28)
Another override is the option to pop up a React modal component that covers the user viewport, available via property fullscrean
.
Fullscrean | Availability |
---|---|
true | Always |
'sm' | Below 576px |
'md' | Below 768px |
'lg' | Below 992px |
'xl' | Below 1200px |
'xxl' | Below 1400px |
1const [visible, setVisible] = useState(false)2const [visibleSm, setVisibleSm] = useState(false)3const [visibleMd, setVisibleMd] = useState(false)4const [visibleLg, setVisibleLg] = useState(false)5const [visibleXL, setVisibleXL] = useState(false)6const [visibleXXL, setVisibleXXL] = useState(false)7return (8 <>9 <CButton onClick={() => setVisible(!visible)}>Full screen</CButton>10 <CButton onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>11 <CButton onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>12 <CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>13 <CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>14 <CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>15 <CModal fullscreen visible={visible} onClose={() => setVisible(false)}>16 <CModalHeader>17 <CModalTitle>Full screen</CModalTitle>18 </CModalHeader>19 <CModalBody>...</CModalBody>20 </CModal>21 <CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>22 <CModalHeader>23 <CModalTitle>Full screen below sm</CModalTitle>24 </CModalHeader>25 <CModalBody>...</CModalBody>26 </CModal>27 <CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>28 <CModalHeader>29 <CModalTitle>Full screen below md</CModalTitle>30 </CModalHeader>31 <CModalBody>...</CModalBody>32 </CModal>33 <CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>34 <CModalHeader>35 <CModalTitle>Full screen below lg</CModalTitle>36 </CModalHeader>37 <CModalBody>...</CModalBody>38 </CModal>39 <CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>40 <CModalHeader>41 <CModalTitle>Full screen below xl</CModalTitle>42 </CModalHeader>43 <CModalBody>...</CModalBody>44 </CModal>45 <CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>46 <CModalHeader>47 <CModalTitle>Full screen below xxl</CModalTitle>48 </CModalHeader>49 <CModalBody>...</CModalBody>50 </CModal>51 </>52)
React modals use local CSS variables on .modal
and .modal-backdrop
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
1--cui-modal-zindex: #{$zindex-modal};2--cui-modal-width: #{$modal-md};3--cui-modal-padding: #{$modal-inner-padding};4--cui-modal-margin: #{$modal-dialog-margin};5--cui-modal-color: #{$modal-content-color};6--cui-modal-bg: #{$modal-content-bg};7--cui-modal-border-color: #{$modal-content-border-color};8--cui-modal-border-width: #{$modal-content-border-width};9--cui-modal-border-radius: #{$modal-content-border-radius};10--cui-modal-box-shadow: #{$modal-content-box-shadow-xs};11--cui-modal-inner-border-radius: #{$modal-content-inner-border-radius};12--cui-modal-header-padding-x: #{$modal-header-padding-x};13--cui-modal-header-padding-y: #{$modal-header-padding-y};14--cui-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y15--cui-modal-header-border-color: #{$modal-header-border-color};16--cui-modal-header-border-width: #{$modal-header-border-width};17--cui-modal-title-line-height: #{$modal-title-line-height};18--cui-modal-footer-gap: #{$modal-footer-margin-between};19--cui-modal-footer-bg: #{$modal-footer-bg};20--cui-modal-footer-border-color: #{$modal-footer-border-color};21--cui-modal-footer-border-width: #{$modal-footer-border-width};
1--cui-backdrop-zindex: #{$zindex-modal-backdrop};2--cui-backdrop-bg: #{$modal-backdrop-bg};3--cui-backdrop-opacity: #{$modal-backdrop-opacity};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CModal style={vars}>...</CModal>
1$modal-inner-padding: $spacer;23$modal-footer-margin-between: .5rem;45$modal-dialog-margin: .5rem;6$modal-dialog-margin-y-sm-up: 1.75rem;78$modal-title-line-height: $line-height-base;910$modal-content-color: unset;11$modal-content-bg: $white;12$modal-content-border-color: var(--cui-border-color-translucent);13$modal-content-border-width: $border-width;14$modal-content-border-radius: $border-radius-lg;15$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);16$modal-content-box-shadow-xs: $box-shadow-sm;17$modal-content-box-shadow-sm-up: $box-shadow;1819$modal-backdrop-bg: $black;20$modal-backdrop-opacity: .5;2122$modal-header-border-color: var(--cui-border-color);23$modal-header-border-width: $modal-content-border-width;24$modal-header-padding-y: $modal-inner-padding;25$modal-header-padding-x: $modal-inner-padding;26$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility2728$modal-footer-bg: null;29$modal-footer-border-color: $modal-header-border-color;30$modal-footer-border-width: $modal-header-border-width;3132$modal-sm: 300px;33$modal-md: 500px;34$modal-lg: 800px;35$modal-xl: 1140px;3637$modal-fade-transform: translate(0, -50px);38$modal-show-transform: none;39$modal-transition: transform .3s ease-out;40$modal-scale-transform: scale(1.02);
1import { CModal } from '@coreui/react'2// or3import 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 | - |
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 | - |
1import { CModalBody } from '@coreui/react'2// or3import CModalBody from '@coreui/react/src/components/modal/CModalBody'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { CModalFooter } from '@coreui/react'2// or3import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { CModalHeader } from '@coreui/react'2// or3import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
closeButton | Add a close button component to the header. | boolean | true |
1import { CModalTitle } from '@coreui/react'2// or3import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |