ModalPopup

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.

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

With arrow

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

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        hasArrow
        placement="right"
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow border"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);

  return (
    <>
      <div className="d-flex">
        <Button
          ref={setTarget}
          variant="outline-primary"
          onClick={open}>
          Open modal popup
        </Button>
      </div>
      <ModalPopup
        hasArrow
        placement="right"
        positionRef={target}
        isOpen={isOpen}
        onClose={close}>
        <div
          className="bg-white p-3 rounded shadow border"
          style={{textAlign: 'start'}}>
          <p>This could be a menu or tray.</p>

          <Button variant="primary" className="mie-2">Action</Button>
          <ModalCloseButton variant="outline-primary">Close</ModalCloseButton>
        </div>
      </ModalPopup>
    </>
  )
}

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;
$modal-inner-padding-bottom:        .7rem !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 Required
Specifies the contents of the modal
onClose func Required Required
A callback function for when the modal is dismissed
isOpen bool Required Required
Is the modal dialog open or closed
isBlocking bool Required
Prevent clicking on the backdrop to close the modal
Defaultfalse
withPortal bool Required
Insert modal into a different location in the DOM
Defaultfalse
positionRef func Required | shape Required {
current: shape {},
} Required
Specifies an element near which the modal should be displayed
Defaultnull
placement PopperElement.propTypes.placement Required
Specifies position according to the element that the positionRef prop points to
Default'bottom-start'
hasArrow bool Required
Caret to the modal popup pointing to the target
Defaultfalse

ModalCloseButton Props API

as elementType Required
Specifies the base element
DefaultButton
children node Required
Specifies the content of the button
Defaultnull
className string Required
Specifies class name to append to the base element
onClick func Required
Specifies the callback function when the close button is clicked

Paragon Design System

ModalPopup

With arrow

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

ModalPopup

With arrow#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

With arrow