Theme

npm_versionnpm Paragon package page

A set of components for making all kinds of modal dialogs. Remember to supply the required title prop to ModalDialog in order ensure there is an accessible label for the dialog element.

Basic Usage

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

With header content

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#

ModalDialog Props API
  • children node Required

    Specifies the content of the dialog

  • title string Required

    The aria-label of the dialog

  • onClose func Required

    A callback to close the modal dialog

  • isOpen bool

    Is the modal dialog open or closed

    Defaultfalse
  • hasCloseButton bool

    The close 'x' icon button in the top right of the dialog box

    Defaulttrue
  • size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'

    Sizes determine the maximum width of the dialog box

    Default'md'
  • variant enum'default' | 'warning' | 'danger' | 'success' | 'dark'

    The visual style of the dialog box

    Default'default'
  • closeLabel string

    The label supplied to the close icon button if one is rendered

    Default'Close'
  • className string

    Specifies class name to append to the base element

  • isFullscreenScroll bool

    Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog. Body receives a scrollbar, when true the browser window itself receives the scrollbar.

    Defaultfalse
  • isFullscreenOnMobile bool

    To show full screen view on mobile screens

    Defaultfalse
  • isBlocking bool

    Prevent clicking on the backdrop or pressing Esc to close the modal

    Defaultfalse
  • zIndex number

    Specifies the z-index of the modal

  • isOverflowVisible bool

    Specifies whether overflow is visible in the modal

    Defaulttrue
ModalDialogTitle Props API
  • as elementType

    Specifies the base element

    Default'h2'
  • children node Required

    Specifies the contents of the header

  • className string

    Specifies class name to append to the base element

ModalDialogHeader Props API
  • as elementType

    Specifies the base element

    Default'div'
  • children node Required

    Specifies the contents of the header

  • className string

    Specifies class name to append to the base element

ModalDialogHero Props API
  • as elementType
    Default'div'
  • children node Required
  • className string
ModalDialogBody Props API
  • as elementType

    Specifies the base element

    Default'div'
  • children node Required

    Specifies the contents of the header

  • className string

    Specifies class name to append to the base element

ModalDialogFooter Props API
  • as elementType

    Specifies the base element

    Default'div'
  • children node Required

    Specifies the contents of the header

  • className string

    Specifies class name to append to the base element

Usage Insights#

ModalDialog

Project NameParagon VersionInstance Count
frontend-app-account22.0.04
frontend-app-admin-portal21.13.122
frontend-app-authn22.6.02
frontend-app-communications22.0.01
frontend-app-course-authoring22.4.017
proctoring22.4.01
xpert_unit_summary22.4.01
frontend-app-discussions22.1.12
frontend-app-enterprise-public-catalog21.13.12
frontend-app-gradebook22.1.11
frontend-app-learner-dashboard22.4.05
frontend-app-learner-portal-enterprise21.13.13
frontend-app-learner-record22.6.01
frontend-app-learning22.3.04
frontend-app-library-authoring21.11.33
frontend-app-payment22.1.12
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components22.0.01
frontend-lib-special-exams22.2.01
prospectus20.46.23

ModalDialogBody

Project NameParagon VersionInstance Count
frontend-app-account22.0.04
frontend-app-admin-portal21.13.122
frontend-app-authn22.6.02
frontend-app-communications22.0.01
frontend-app-course-authoring22.4.017
proctoring22.4.01
xpert_unit_summary22.4.01
frontend-app-discussions22.1.12
frontend-app-enterprise-public-catalog21.13.12
frontend-app-gradebook22.1.11
frontend-app-learner-dashboard22.4.01
frontend-app-learner-portal-enterprise21.13.13
frontend-app-learner-record22.6.01
frontend-app-learning22.3.02
frontend-app-library-authoring21.11.32
frontend-app-payment22.1.11
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components22.0.03
frontend-lib-special-exams22.2.01
prospectus20.46.23

ModalDialogCloseButton

Project NameParagon VersionInstance Count
frontend-app-account22.0.04
frontend-app-admin-portal21.13.114
frontend-app-authn22.6.01
frontend-app-communications22.0.01
frontend-app-course-authoring22.4.013
proctoring22.4.01
xpert_unit_summary22.4.01
frontend-app-discussions22.1.12
frontend-app-gradebook22.1.11
frontend-app-learner-record22.6.01
frontend-app-learning22.3.03
frontend-app-library-authoring21.11.32
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components22.0.01
prospectus20.46.22

ModalDialogFooter

Project NameParagon VersionInstance Count
frontend-app-account22.0.04
frontend-app-admin-portal21.13.122
frontend-app-authn22.6.02
frontend-app-communications22.0.01
frontend-app-course-authoring22.4.014
proctoring22.4.01
xpert_unit_summary22.4.01
frontend-app-discussions22.1.12
frontend-app-enterprise-public-catalog21.13.12
frontend-app-gradebook22.1.11
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.6.01
frontend-app-learning22.3.01
frontend-app-library-authoring21.11.32
frontend-app-payment22.1.11
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components22.0.03
frontend-lib-special-exams22.2.01
prospectus20.46.22

ModalDialogHeader

Project NameParagon VersionInstance Count
frontend-app-account22.0.04
frontend-app-admin-portal21.13.121
frontend-app-authn22.6.02
frontend-app-course-authoring22.4.018
proctoring22.4.01
xpert_unit_summary22.4.01
frontend-app-discussions22.1.12
frontend-app-learner-dashboard22.4.02
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learner-record22.6.01
frontend-app-learning22.3.01
frontend-app-library-authoring21.11.32
frontend-app-payment22.1.11
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components22.0.03
frontend-lib-special-exams22.2.01
prospectus20.46.22

ModalDialogHero

Project NameParagon VersionInstance Count
frontend-app-enterprise-public-catalog21.13.12
frontend-app-learner-dashboard22.4.01
frontend-app-learner-portal-enterprise21.13.13
frontend-app-learning22.3.01

ModalDialogTitle

Project NameParagon VersionInstance Count
frontend-app-account22.0.04
frontend-app-admin-portal21.13.121
frontend-app-authn22.6.02
frontend-app-course-authoring22.4.018
proctoring22.4.01
xpert_unit_summary22.4.01
frontend-app-discussions22.1.12
frontend-app-enterprise-public-catalog21.13.14
frontend-app-learner-portal-enterprise21.13.12
frontend-app-learner-record22.6.01
frontend-app-learning22.3.02
frontend-app-library-authoring21.11.32
frontend-app-payment22.1.11
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.015
frontend-lib-content-components22.0.02
frontend-lib-special-exams22.2.01
prospectus20.46.22