StandardModal

The standard ModalDialog composition. StandardModal 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.

Basic usage

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open standard modal</Button>

      <StandardModal
        title="This is a standard modal dialog"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <p className="small">
              <Hyperlink href="#">Get help</Hyperlink>
            </p>
            <ActionRow.Spacer />
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
        </p>
      </StandardModal>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open standard modal</Button>

      <StandardModal
        title="This is a standard modal dialog"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <p className="small">
              <Hyperlink href="#">Get help</Hyperlink>
            </p>
            <ActionRow.Spacer />
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
        </p>
      </StandardModal>
    </>
  )
}

Theme Variables (SCSS)#

// Modals

// Padding applied to the modal body
$modal-inner-padding:               1.5rem !default;
$modal-inner-padding-bottom:        .7rem !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;

StandardModal Props API

children node Required Required
Specifies the content of the Modal
title string Required Required
The title for the Modal
onClose func Required Required
Optional callback function for when the modal it dismissed.
isOpen bool Required
Is the modal open or closed
Defaultfalse
hasCloseButton bool Required
The close 'x' icon button in the top right corner
Defaulttrue
size enum Required'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
The modal size
Default'md'
variant enum Required'default' | 'warning' | 'danger' | 'success' | 'dark'
The modal style variant to use
Default'default'
closeLabel string Required
Specifies the aria-label attribute for the close button
Default'Close'
className string Required
A class name to append to the modal
isFullscreenScroll bool Required
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 Required
Specifies what should be displayed in the footer of the nodal
Defaultnull
beforeBodyNode node Required
Specifies what should be displayed before the body block
Defaultnull
afterBodyNode node Required
Specifies what should be displayed after the body block
Defaultnull

ModalDialog Props API

children node Required Required
Specifies the content of the dialog
title string Required Required
The aria-label of the dialog
onClose func Required Required
A callback to close the modal dialog
isOpen bool Required
Is the modal dialog open or closed
Defaultfalse
hasCloseButton bool Required
The close 'x' icon button in the top right of the dialog box
Defaulttrue
size enum Required'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Sizes determine the maximum width of the dialog box
Default'md'
variant enum Required'default' | 'warning' | 'danger' | 'success' | 'dark'
The visual style of the dialog box
Default'default'
closeLabel string Required
The label supplied to the close icon button if one is rendered
Default'Close'
className string Required
Specifies class name to append to the base element
isFullscreenScroll bool Required
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 Required
To show full screen view on mobile screens
Defaultfalse
isBlocking bool Required
Prevent clicking on the backdrop to close the modal
Defaultfalse
zIndex number Required

Paragon Design System

StandardModal

Basic usage

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)

StandardModal

Basic usage#

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)

Basic usage