Thumbprint logo

Modal Standard

A twice deprecated standard modal

Deprecated

This package was deprecated in favor of `Modal` or `ModalV2`. Since this modal uses a deprecated library (that doesn't support React-19) we cannot support it in this documentation site.

Basic modal

Modals can be opened or closed with a isOpen prop.

This example includes a wrapper component that opens the modal when the button is clicked on.

<div>
  <p>
    <b>
      DEPRECATED
    </b>
    : The documentation for this component is no longer supported on this documentation site.
  </p>
  <p>
    <b>
      Please use the modern equivalents:
    </b>
    <ul>
      <li>
        <a href="/components/modal/react/">
          Modal (v1)
        </a>
      </li>
      <li>
        <a href="/components/modal-v2/react/">
          ModalV2
        </a>
      </li>
    </ul>
  </p>
</div>

Props
ModalStandard
  • onCloseClick
    required
    Function that fires to close the modal.
    

  • children
    Content that appears above the Backdrop.
    

    Default
    undefined
  • onOpenFinish
    Function that fires once the modal has opened and transitions have ended.
    

    Default
    undefined
  • onCloseFinish
    Function that fires once the modal has closed and transitions have ended.
    

    Default
    undefined
  • shouldCloseOnBackdropClick
    Determines if the modal should close when clicking on the Backdrop,
outside of the children.
    

    Default
    true
  • shouldHideCloseButton
    Determines if the close button should be rendered. This is generally discouraged and should
be used carefully. If used, the contents passed into the modal must contain a focusable
element such as a link or button.
    

    Default
    false
  • isOpen
    Should the Backdrop appear open.
    

    Default
    false
  • theme
    Sets the color of the background and close button.
    

    Default
    'faint'
  • aria-label
    Provides an accessible label for the modal, used by assistive technologies such as screen readers.