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#
- children
node
RequiredSpecifies the contents of the modal
- onClose
func
RequiredA callback function for when the modal is dismissed
- isOpen
bool
RequiredIs the modal dialog open or closed
- isBlocking
bool
DefaultfalsePrevent clicking on the backdrop to close the modal
- zIndex
number
- as
elementType
DefaultButtonSpecifies the base element
- children
node
DefaultnullSpecifies 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
Usage Insights#
ModalCloseButton
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 20.28.5 | 1 | |
frontend-app-learner-dashboard | 20.19.0 | 1 |
ModalLayer
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 20.28.5 | 1 |