ModalDialog

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.

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;

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 to close the modal
Defaultfalse
zIndex number

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

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

Paragon Design System

ModalDialog

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)