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)#

$modal-inner-padding:                1.5rem !default;
$modal-inner-padding-bottom:         .7rem !default;
$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;
$modal-close-container-top:          .625rem !default;
$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;
$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;
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 | shape {}[]

    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

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)