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.

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: 0px 10px 20px rgba($black, 0.15), 0px 8px 20px rgba($black, 0.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-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
$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; // Keep this for backwards compatibility
$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;
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
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