Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

FullscreenModal

The fullscreen ModalDialog composition. FullscreenModal passes all of its props through to an underlying ModalDialog component providing some limited customization. If you have unique needs, use the ModalDialog compound component family directly.

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;
FullscreenModal Props API
  • children
    node Required

    Specifies contents of the component.

  • className
    string

    Specifies class name to append to the base element.

  • title
    string Required

    Specifies the aria-label of the dialog.

  • onClose
    func Required

    Specifies a callback to close the modal dialog.

  • isOpen
    bool

    Specifies whether the modal is open.

    Defaultfalse
  • hasCloseButton
    bool

    Specifies whether the model hase close 'x' icon button in the top right of the dialog box.

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

    Specifies size of the dialog box.

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

    Specifies visual style of the dialog box.

    Default'dark'
  • closeLabel
    string

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

    Default'Close'
  • 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
  • footerNode
    node

    Specifies footer for the dialog box.

    Defaultnull
  • beforeBodyNode
    node

    Specifies content that should be rendered before modal's body.

    Defaultnull
  • afterBodyNode
    node

    Specifies content that should be rendered after modal's body.

    Defaultnull
  • modalBodyClassName
    string

    Specifies class name for modal's body component.

    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

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)