Components

Modal Standard(React)

A basic and commonly used modal.

Version:10.1.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { ModalStandard } from '@thumbtack/thumbprint-react';

Deprecated

This package was deprecated in favor of ModalCurtain.

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.

Props

ModalStandard

  • children

    Content that appears above the Backdrop.

    Type
    node
    Default
    undefined
  • onCloseClick
    required

    Function that fires to close the modal.

    Type
    func
  • onOpenFinish

    Function that fires once the modal has opened and transitions have ended.

    Type
    func
    Default
    undefined
  • onCloseFinish

    Function that fires once the modal has closed and transitions have ended.

    Type
    func
    Default
    undefined
  • shouldCloseOnBackdropClick

    Determines if the modal should close when clicking on the Backdrop, outside of the children.

    Type
    bool
    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.

    Type
    bool
    Default
    false
  • isOpen

    Should the Backdrop appear open.

    Type
    bool
    Default
    false
  • theme

    Sets the color of the background and close button.

    Type
    oneOf([
      'brand',
      'faint',
    ])
    Default
    'faint'