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.

<CModal>
  <CModalHeader>
    <CModalTitle>React Modal title</CModalTitle>
  </CModalHeader>
  <CModalBody>
    <p>React Modal body text goes here.</p>
  </CModalBody>
  <CModalFooter>
    <CButton color="secondary">Close</CButton>
    <CButton color="primary">Save changes</CButton>
  </CModalFooter>
</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.

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
    <CModal
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="LiveDemoExampleLabel"
    >
      <CModalHeader onClose={() => setVisible(false)}>
        <CModalTitle id="LiveDemoExampleLabel">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <p>Woohoo, you're reading this text in a modal!</p>
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

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.

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
    <CModal
      backdrop="static"
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="StaticBackdropExampleLabel"
    >
      <CModalHeader>
        <CModalTitle id="StaticBackdropExampleLabel">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        I will not close if you click outside me. Don't even try to press escape key.
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

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.

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
    <CModal
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="ScrollingLongContentExampleLabel"
    >
      <CModalHeader>
        <CModalTitle id="ScrollingLongContentExampleLabel">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

You can also create a scrollable react modal component that allows scroll the modal body by adding scrollable prop.

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
    <CModal
      scrollable
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="ScrollingLongContentExampleLabel2"
    >
      <CModalHeader>
        <CModalTitle id="ScrollingLongContentExampleLabel2">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

Vertically centered#

Add alignment="center to <CModal> to vertically center the React modal.

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
    <CModal
      alignment="center"
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="VerticallyCenteredExample"
    >
      <CModalHeader>
        <CModalTitle id="VerticallyCenteredExample">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
    <CModal
      alignment="center"
      scrollable
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="VerticallyCenteredScrollableExample"
    >
      <CModalHeader>
        <CModalTitle id="VerticallyCenteredScrollableExample">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
        <p>
          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
          auctor fringilla.
        </p>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <p>
          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
          vel augue laoreet rutrum faucibus dolor auctor.
        </p>
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

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.

const [visible, setVisible] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
    <CModal
      alignment="center"
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="TooltipsAndPopoverExample"
    >
      <CModalHeader>
        <CModalTitle id="TooltipsAndPopoverExample">Modal title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <h5>Popover in a modal</h5>
        <p>
          This
          <CPopover title="Popover title" content="Popover body content is set in this property.">
            <CButton>button</CButton>
          </CPopover> triggers a popover on click.
        </p>
        <hr />
        <h5>Tooltips in a modal</h5>
        <p>
          <CTooltip content="Tooltip">
            <CLink>This link</CLink>
          </CTooltip>{' '}
          and
          <CTooltip content="Tooltip">
            <CLink>that link</CLink>
          </CTooltip> have tooltips on hover.
        </p>
      </CModalBody>
      <CModalFooter>
        <CButton color="secondary" onClick={() => setVisible(false)}>
          Close
        </CButton>
        <CButton color="primary">Save changes</CButton>
      </CModalFooter>
    </CModal>
  </>
)

Toggle between modals#

Toggle between multiple modals with some clever placement of the visible props. Please note multiple modals cannot be opened at the same time — this method simply toggles between two separate modals.

const [visible, setVisible] = useState(false)
const [visible2, setVisible2] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Open first modal</CButton>
    <CModal
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="ToggleBetweenModalsExample1"
    >
      <CModalHeader>
        <CModalTitle id="ToggleBetweenModalsExample1">Modal 1 title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <p>Show a second modal and hide this one with the button below.</p>
      </CModalBody>
      <CModalFooter>
        <CButton
          color="primary"
          onClick={() => {
            setVisible(false)
            setVisible2(true)
          }}
        >
          Open second modal
        </CButton>
      </CModalFooter>
    </CModal>
    <CModal
      visible={visible2}
      onClick={() => {
        setVisible(true)
        setVisible2(false)
      }}
      aria-labelledby="ToggleBetweenModalsExample2"
    >
      <CModalHeader>
        <CModalTitle id="ToggleBetweenModalsExample2">Modal 2 title</CModalTitle>
      </CModalHeader>
      <CModalBody>
        <p>Hide this modal and show the first with the button below.</p>
      </CModalBody>
      <CModalFooter>
        <CButton
          color="primary"
          onClick={() => {
            setVisible(true)
            setVisible2(false)
          }}
        >
          Back to first
        </CButton>
      </CModalFooter>
    </CModal>
  </>
)

Change animation#

The variable $modal-fade-transform determines the transform state of React Modal component before the modal fade-in animation, whereas the variable $modal-show-transform determines the transform state of Modal component after the modal fade-in animation.

If you want a zoom-in animation, for example, set $modal-fade-transform: scale(.8).

Remove animation#

For modals that simply appear rather than fade into view, set transition to false.

<CModal transition={false}>...</CModal>

Accessibility#

Be sure to add aria-labelledby="...", referencing the modal title, to <CModal /> Additionally, you may give a description of your modal dialog with aria-describedby on <CModal>. Note that you don’t need to add role="dialog, aria-hidden="true", and aria-modal="true" since we already add it.

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`

const [visibleXL, setVisibleXL] = useState(false)
const [visibleLg, setVisibleLg] = useState(false)
const [visibleSm, setVisibleSm] = useState(false)
return (
  <>
    <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
    <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
    <CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
    <CModal
      size="xl"
      visible={visibleXL}
      onClose={() => setVisibleXL(false)}
      aria-labelledby="OptionalSizesExample1"
    >
      <CModalHeader>
        <CModalTitle id="OptionalSizesExample1">Extra large modal</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      size="lg"
      visible={visibleLg}
      onClose={() => setVisibleLg(false)}
      aria-labelledby="OptionalSizesExample2"
    >
      <CModalHeader>
        <CModalTitle id="OptionalSizesExample2">Large modal</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      size="sm"
      visible={visibleSm}
      onClose={() => setVisibleSm(false)}
      aria-labelledby="OptionalSizesExample3"
    >
      <CModalHeader>
        <CModalTitle id="OptionalSizesExample3">Small modal</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
  </>
)

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`

const [visible, setVisible] = useState(false)
const [visibleSm, setVisibleSm] = useState(false)
const [visibleMd, setVisibleMd] = useState(false)
const [visibleLg, setVisibleLg] = useState(false)
const [visibleXL, setVisibleXL] = useState(false)
const [visibleXXL, setVisibleXXL] = useState(false)
return (
  <>
    <CButton onClick={() => setVisible(!visible)}>Full screen</CButton>
    <CButton onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
    <CButton onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
    <CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
    <CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
    <CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
    <CModal
      fullscreen
      visible={visible}
      onClose={() => setVisible(false)}
      aria-labelledby="FullscreenExample1"
    >
      <CModalHeader>
        <CModalTitle id="FullscreenExample1">Full screen</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      fullscreen="sm"
      visible={visibleSm}
      onClose={() => setVisibleSm(false)}
      aria-labelledby="FullscreenExample2"
    >
      <CModalHeader>
        <CModalTitle id="FullscreenExample2">Full screen below sm</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      fullscreen="md"
      visible={visibleMd}
      onClose={() => setVisibleMd(false)}
      aria-labelledby="FullscreenExample3"
    >
      <CModalHeader>
        <CModalTitle id="FullscreenExample3">Full screen below md</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      fullscreen="lg"
      visible={visibleLg}
      onClose={() => setVisibleLg(false)}
      aria-labelledby="FullscreenExample4"
    >
      <CModalHeader>
        <CModalTitle id="FullscreenExample4">Full screen below lg</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      fullscreen="xl"
      visible={visibleXL}
      onClose={() => setVisibleXL(false)}
      aria-labelledby="FullscreenExample5"
    >
      <CModalHeader>
        <CModalTitle id="FullscreenExample5">Full screen below xl</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
    <CModal
      fullscreen="xxl"
      visible={visibleXXL}
      onClose={() => setVisibleXXL(false)}
      aria-labelledby="FullscreenExample6"
    >
      <CModalHeader>
        <CModalTitle id="FullscreenExample6">Full screen below xxl</CModalTitle>
      </CModalHeader>
      <CModalBody>...</CModalBody>
    </CModal>
  </>
)

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.

--cui-modal-zindex: #{$zindex-modal};
--cui-modal-width: #{$modal-md};
--cui-modal-padding: #{$modal-inner-padding};
--cui-modal-margin: #{$modal-dialog-margin};
--cui-modal-color: #{$modal-content-color};
--cui-modal-bg: #{$modal-content-bg};
--cui-modal-border-color: #{$modal-content-border-color};
--cui-modal-border-width: #{$modal-content-border-width};
--cui-modal-border-radius: #{$modal-content-border-radius};
--cui-modal-box-shadow: #{$modal-content-box-shadow-xs};
--cui-modal-inner-border-radius: #{$modal-content-inner-border-radius};
--cui-modal-header-padding-x: #{$modal-header-padding-x};
--cui-modal-header-padding-y: #{$modal-header-padding-y};
--cui-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--cui-modal-header-border-color: #{$modal-header-border-color};
--cui-modal-header-border-width: #{$modal-header-border-width};
--cui-modal-title-line-height: #{$modal-title-line-height};
--cui-modal-footer-gap: #{$modal-footer-margin-between};
--cui-modal-footer-bg: #{$modal-footer-bg};
--cui-modal-footer-border-color: #{$modal-footer-border-color};
--cui-modal-footer-border-width: #{$modal-footer-border-width};

--cui-backdrop-zindex: #{$zindex-modal-backdrop};
--cui-backdrop-bg: #{$modal-backdrop-bg};
--cui-backdrop-opacity: #{$modal-backdrop-opacity};

How to use CSS variables#

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': 'red',
}
return <CModal style={vars}>...</CModal>

SASS variables#

$modal-inner-padding:               $spacer !default;

$modal-footer-margin-between:       .5rem !default;

$modal-dialog-margin:               .5rem !default;
$modal-dialog-margin-y-sm-up:       1.75rem !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-color:               null !default;
$modal-content-bg:                  var(--cui-body-bg) !default;
$modal-content-border-color:        var(--cui-border-color-translucent) !default;
$modal-content-border-width:        var(--cui-border-width) !default;
$modal-content-border-radius:       var(--cui-border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:       $box-shadow-sm !default;
$modal-content-box-shadow-sm-up:    $box-shadow !default;

$modal-backdrop-bg:                 $black !default;
$modal-backdrop-opacity:            .5 !default;

$modal-header-border-color:         var(--cui-border-color) !default;
$modal-header-border-width:         $modal-content-border-width !default;
$modal-header-padding-y:            $modal-inner-padding !default;
$modal-header-padding-x:            $modal-inner-padding !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility

$modal-footer-bg:                   null !default;
$modal-footer-border-color:         $modal-header-border-color !default;
$modal-footer-border-width:         $modal-header-border-width !default;

$modal-sm:                          300px !default;
$modal-md:                          500px !default;
$modal-lg:                          800px !default;
$modal-xl:                          1140px !default;

$modal-fade-transform:              translate(0, -50px) !default;
$modal-show-transform:              none !default;
$modal-transition:                  transform .3s ease-out !default;
$modal-scale-transform:             scale(1.02) !default;

SASS loops#

Responsive fullscreen modals are generated via the $breakpoints map and a loop in scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

@include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

API#

CModal#

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

CModalBody#

import { CModalBody } from '@coreui/react'
// or
import 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#

import { CModalFooter } from '@coreui/react'
// or
import 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#

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

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