Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Modal

Example Usage

configurable buttons

<Modal
  open
  title="Modal title."
  body="Modal body."
  buttons={[
    <Button variant="primary">Blue button!</Button>,
    {
      label: 'Red button!',
      buttonType: 'danger',
    },
    <Button variant="success">Green button!</Button>,
  ]}
  onClose={() => {}}
/>

configurable title and body

<Modal
  open
  title="Custom title!"
  body="Custom body!"
  buttons={[
    <Button variant="dark">Dark button!</Button>
  ]}
  onClose={() => {}}
/>

configurable buttons that perform actions

<Modal
  open
  title="Modal title."
  body="Modal body."
  buttons={[
    <Button
      variant="light"
      onClick={action('button-click')}
    >
      Click me and check the console!
    </Button>,
  ]}
  onClose={() => {}}
/>

configurable close button string

<Modal
  open
  title="Modal title."
  body="Modal body."
  closeText="SHOO!"
  onClose={() => {}}
/>

configurable close button element

<Modal
  open
  title="Modal title."
  body="Modal body."
  closeText={
    <Icon
      className="fa fa-ship"
      screenReaderText="Close"
    />
  }
  onClose={() => {}}
/>

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;
Modal Props API
  • open
    bool

    specifies whether the modal renders open or closed on the initial render. It defaults to false.

    Defaultfalse
  • parentSelector
    string

    is the selector for an element in the dom which the modal should be rendered under. It uses querySelector to find the first element that matches that selector, and then creates a react portal to a div underneath the parent element.

    Default'body'
  • title
    string | element Required

    a string or an element that is rendered inside of the modal title, above the modal body.

  • body
    string | element Required

    a string or an element that is rendered inside of the modal body, between the title and the footer.

  • buttons
    element | object[]

    an array of either elements or shapes that take the form of the buttonPropTypes. See the buttonPropTypes for a list of acceptable props to pass as part of a button.

    Default[]
  • closeText
    string | element

    specifies the display text of the default Close button. It defaults to "Close".

    Default'Close'
  • onClose
    func Required

    a function that is called on close. It can be used to perform actions upon closing of the modal, such as restoring focus to the previous logical focusable element.

  • variant
    shape {
    status: string,
    }
    Default{}
  • renderDefaultCloseButton
    bool

    specifies whether the default close button is rendered in the footer. It defaults to true.

    Defaulttrue
  • renderHeaderCloseButton
    bool

    specifies whether a close button is rendered in the modal header. It defaults to true.

    Defaulttrue
  • dialogClassName
    string

    Specifies optional classes to add to the element with the '.modal-dialog' class. See Bootstrap documentation for possible classes. Some options: modal-lg, modal-sm, modal-dialog-centered

Guides

Foundations

Components

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

All components (A-Z)