A generic component for creating accessible modal popup objects.

Note that ModalPopup expects DOM node, not ref, in order to be able to update when the node changes. A proper way to implement this is to use callback refs with useState hook as in the example below.

With arrow

The arrow modifier positions an inner element of the modal popup so it appears centered relative to the reference.

Extra props supplied to ModalPopup are passed through to an underlying PopperElement component.

Theme Variables (SCSS)#

// Modals
// Padding applied to the modal body
$modal-inner-padding: 1.5rem !default;
// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: 1.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: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: 0 !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $border-color !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding-y: 1rem !default;
$modal-header-padding-x: 1.5rem !default;
// Keep this for backwards compatibility
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default;
$modal-footer-padding-y: 1rem !default;
$modal-footer-padding-x: 1.5rem !default;
// Keep this for backwards compatibility
$modal-footer-padding: $modal-footer-padding-y $modal-footer-padding-x !default;
$modal-xl: 1140px !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 400px !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;
ModalPopup Props API
  • children node Required

    Specifies the contents of the modal

  • onClose func Required

    A callback function for when the modal is dismissed

  • isOpen bool Required

    Is the modal dialog open or closed

  • isBlocking bool

    Prevent clicking on the backdrop to close the modal

  • withPortal bool

    Insert modal into a different location in the DOM

  • positionRef func | shape {
    current: shape {},

    Specifies an element near which the modal should be displayed

  • placement PopperElement.propTypes.placement

    Specifies position according to the element that the positionRef prop points to

  • hasArrow bool

    Caret to the modal popup pointing to the target

ModalCloseButton Props API
  • as elementType

    Specifies the base element

  • children node

    Specifies the content of the button

  • className string

    Specifies class name to append to the base element

  • onClick func

    Specifies the callback function when the close button is clicked