Support CoreUI Development

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:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

React Modal Component

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.

Other frameworks

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<CModal
2  className="show d-block position-static"
3  backdrop={false}
4  keyboard={false}
5  portal={false}
6  visible
7>
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>

Live demo#

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          Close
13        </CButton>
14        <CButton color="primary">Save changes</CButton>
15      </CModalFooter>
16    </CModal>
17  </>
18)

Static backdrop#

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          Close
15        </CButton>
16        <CButton color="primary">Save changes</CButton>
17      </CModalFooter>
18    </CModal>
19  </>
20)

Scrolling long content#

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 facilisis
12          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 lacus
16          vel augue laoreet rutrum faucibus dolor auctor.
17        </p>
18        <p>
19          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
20          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
21          auctor fringilla.
22        </p>
23        <p>
24          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
25          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 lacus
29          vel augue laoreet rutrum faucibus dolor auctor.
30        </p>
31        <p>
32          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
33          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
34          auctor fringilla.
35        </p>
36        <p>
37          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
38          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 lacus
42          vel augue laoreet rutrum faucibus dolor auctor.
43        </p>
44        <p>
45          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
46          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
47          auctor fringilla.
48        </p>
49        <p>
50          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
51          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 lacus
55          vel augue laoreet rutrum faucibus dolor auctor.
56        </p>
57        <p>
58          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
59          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
60          auctor fringilla.
61        </p>
62        <p>
63          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
64          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 lacus
68          vel augue laoreet rutrum faucibus dolor auctor.
69        </p>
70        <p>
71          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
72          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
73          auctor fringilla.
74        </p>
75        <p>
76          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
77          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 lacus
81          vel augue laoreet rutrum faucibus dolor auctor.
82        </p>
83        <p>
84          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
85          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
86          auctor fringilla.
87        </p>
88      </CModalBody>
89      <CModalFooter>
90        <CButton color="secondary" onClick={() => setVisible(false)}>
91          Close
92        </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 facilisis
12          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 lacus
16          vel augue laoreet rutrum faucibus dolor auctor.
17        </p>
18        <p>
19          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
20          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
21          auctor fringilla.
22        </p>
23        <p>
24          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
25          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 lacus
29          vel augue laoreet rutrum faucibus dolor auctor.
30        </p>
31        <p>
32          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
33          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
34          auctor fringilla.
35        </p>
36        <p>
37          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
38          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 lacus
42          vel augue laoreet rutrum faucibus dolor auctor.
43        </p>
44        <p>
45          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
46          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
47          auctor fringilla.
48        </p>
49        <p>
50          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
51          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 lacus
55          vel augue laoreet rutrum faucibus dolor auctor.
56        </p>
57        <p>
58          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
59          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
60          auctor fringilla.
61        </p>
62        <p>
63          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
64          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 lacus
68          vel augue laoreet rutrum faucibus dolor auctor.
69        </p>
70        <p>
71          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
72          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
73          auctor fringilla.
74        </p>
75        <p>
76          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
77          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 lacus
81          vel augue laoreet rutrum faucibus dolor auctor.
82        </p>
83        <p>
84          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
85          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
86          auctor fringilla.
87        </p>
88      </CModalBody>
89      <CModalFooter>
90        <CButton color="secondary" onClick={() => setVisible(false)}>
91          Close
92        </CButton>
93        <CButton color="primary">Save changes</CButton>
94      </CModalFooter>
95    </CModal>
96  </>
97)

Vertically centered#

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          Close
16        </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 facilisis
12          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 lacus
16          vel augue laoreet rutrum faucibus dolor auctor.
17        </p>
18        <p>
19          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
20          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
21          auctor fringilla.
22        </p>
23        <p>
24          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
25          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 lacus
29          vel augue laoreet rutrum faucibus dolor auctor.
30        </p>
31      </CModalBody>
32      <CModalFooter>
33        <CButton color="secondary" onClick={() => setVisible(false)}>
34          Close
35        </CButton>
36        <CButton color="primary">Save changes</CButton>
37      </CModalFooter>
38    </CModal>
39  </>
40)

Tooltips and popovers#

<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          This
13          <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          and
24          <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          Close
32        </CButton>
33        <CButton color="primary">Save changes</CButton>
34      </CModalFooter>
35    </CModal>
36  </>
37)

Optional sizes#

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)

Customizing#

CSS variables#

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 y
15--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};

How to use CSS variables#

1const vars = { 
2  '--my-css-var': 10,
3  '--my-another-css-var': "red" 
4}
5return <CModal style={vars}>...</CModal>

SASS variables#

1$modal-inner-padding:               $spacer;
2
3$modal-footer-margin-between:       .5rem;
4
5$modal-dialog-margin:               .5rem;
6$modal-dialog-margin-y-sm-up:       1.75rem;
7
8$modal-title-line-height:           $line-height-base;
9
10$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;
18
19$modal-backdrop-bg:                 $black;
20$modal-backdrop-opacity:            .5;
21
22$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 compatibility
27
28$modal-footer-bg:                   null;
29$modal-footer-border-color:         $modal-header-border-color;
30$modal-footer-border-width:         $modal-header-border-width;
31
32$modal-sm:                          300px;
33$modal-md:                          500px;
34$modal-lg:                          800px;
35$modal-xl:                          1140px;
36
37$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);

API#

CModal#

1import { CModal } from '@coreui/react'
2// or
3import 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`	-

CModalBody#

1import { CModalBody } from '@coreui/react'
2// or
3import 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`	-

CModalFooter#

1import { CModalFooter } from '@coreui/react'
2// or
3import 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`	-

CModalHeader#

1import { CModalHeader } from '@coreui/react'
2// or
3import 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

CModalTitle#

1import { CModalTitle } from '@coreui/react'
2// or
3import 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>`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.