Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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.

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

    Defaultfalse
  • withPortal bool

    Insert modal into a different location in the DOM

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

    Specifies an element near which the modal should be displayed

    Defaultnull
  • placement PopperElement.propTypes.placement

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

    Default'bottom-start'
  • hasArrow bool

    Caret to the modal popup pointing to the target

    Defaultfalse
ModalCloseButton Props API
  • as elementType

    Specifies the base element

    DefaultButton
  • children node

    Specifies the content of the button

    Defaultnull
  • className string

    Specifies class name to append to the base element

  • onClick func

    Specifies the callback function when the close button is clicked

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)