Theme

PlaygroundBeta

npm_versionnpm Paragon package page

ModalLayer

A generic component for creating accessibile modal layer objects. The modal layer provides a focus locked and scrollable overlay layer for a dialog. The child of a ModalLayer must have the role "dialog" and specify either an aria-label or aria-labelledby attribute.

Basic usage

Any Paragon component or export may be added to the code example.

Small modal variant

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$modal-inner-padding: 1.5rem !default;
$modal-inner-padding-bottom: .7rem !default;
$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;
$modal-close-container-top: .625rem !default;
$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;
$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;

Props API#

ModalLayer 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
  • zIndex number
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

Usage Insights#

ModalCloseButton

Project NameParagon VersionInstance Count
frontend-app-account20.28.51
frontend-app-learner-dashboard20.19.01

ModalLayer

Project NameParagon VersionInstance Count
frontend-app-account20.28.51