Components

Modal(React)

A basic and commonly used modal.

Version:14.4.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent, ModalContentFullBleed, ModalFooter, ModalAnimatedWrapper } from '@thumbtack/thumbprint-react';

Modal variations

Modals can be opened or closed with a isOpen prop.

Basic modal with a form

The Modal has a curtain (backdrop) at medium and large breakpoints. It appears fullscreen on small devices.

This modal has a sticky footer that is always visible. The sticky footer is set by using the isSticky prop on the ModalFooter component.

This modal does not have a default, non-sticky footer. You’ll have to scroll to view the button within the ModalFooter.

Narrow modal

It’s possible to render narrow modals with the width prop.

Modal with fixed height

To keep the height of the modal (including top row with close button and sticky footer) fixed such that it remains consistent as modal content changes, you can apply heightAboveSmall prop. It only applies when the viewport is above the small breakpoint; modals always stretch 100% of the viewport under small breakpoint. When used with <ModalFooter isSticky>, the modal will not expand beyond the height of the viewport to maintain a sticky footer (i.e. the modal’s height will be the max of the provided height and the viewport height).

Full bleed modal

You can use the ModalContentFullBleed component to create a section of modal content that visually reaches the edge of the modal. This is useful for setting your own background color or section borders, for example.

Warning

This component provides the same amount of padding as the modal itself, so it can't be used to render child elements that touch the edge of the modal – only to set the background or other styles. This is to make sure that everything in the modal has consistent padding at all breakpoints. Interfaces like horizontally scrolling lists that reach the edge of their container are not suitable for use inside a modal, and you should work with your designer to find an alternative.

Props

Modal

  • onCloseClick
    required

    Function that fires to close the modal.

    Type
    () => void
  • children

    Content that appears within the modal.

    Type
    React.ReactNode
  • onOpenFinish

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

    Type
    () => void
  • onCloseFinish

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

    Type
    () => void
  • 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
    boolean
  • shouldCloseOnCurtainClick

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

    Type
    boolean
  • isOpen

    Should the modal appear open.

    Type
    boolean
  • width

    Sets the max-width of the modal container.

    Type

    This prop can be one of the following 3 types:

    • 'narrow'
    • 'medium'
    • 'wide'
  • heightAboveSmall

    Sets height of the modal container above small viewport. If auto (default), the modal height will be determined by its content. Otherwise, the modal height will be fixed at some constant px.

    Type

    This prop can be one of the following 3 types:

    • 'auto'
    • 'medium'
    • 'tall'

ModalHeader

  • children
    required

    Content (usually a ModalTitle and ModalDescription) that appears at the top of the modal.

    Type
    React.ReactNode

ModalTitle

  • children
    required

    Text that describes the modal contents. It is intended for use within the ModalHeader.

    Type
    string

ModalDescription

  • children
    required

    Text intended for use below a ModalTitle and within a ModalHeader.

    Type
    React.ReactNode

ModalContent

  • children
    required

    Content (usually a form) that makes up the main part of the modal.

    Type
    React.ReactNode

ModalContentFullBleed

  • children
    required

    Content (usually a form) that makes up the main part of the modal.

    Type
    React.ReactNode
  • className

    Allows the React className prop to be passed through to the rendered element.

    Type
    string
    Default
    ''
  • style

    Allows the React style prop to be passed through to the rendered element.

    Type
    React.CSSProperties
    Default
    {}

ModalFooter

  • children
    required

    Content (ususally buttons) to render within the footer.

    Type
    React.ReactNode
  • isSticky

    Attaches the footer to the bottom of the modal below the small breakpoint.

    Type
    boolean

ModalAnimatedWrapper

ModalAnimatedWrapper is an exported component that we export for developers that want access to Modal without padding and a close button. We export it as a named export instead of creating a hasNoPadding prop partly to discourage the use of Modal without padding.

This component uses ModalCurtain and includes the backdrop, transition, and white modal wrapper that is available at a few widths.

  • onCloseClick
    required

    Function that fires to close the modal.

    Type
    () => void
  • children

    Content that appears within the modal.

    Type
    React.ReactNode
  • onOpenFinish

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

    Type
    () => void
  • onCloseFinish

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

    Type
    () => void
  • shouldCloseOnCurtainClick

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

    Type
    boolean
    Default
    true
  • shouldPageScrollAboveSmall

    Allows the page to scroll vertically at viewports larger than the small breakpoint. If false, the modal will always be equal to or smaller than the viewport and the contents of the modal will scroll, not the page itself.

    Type
    boolean
    Default
    true
  • isOpen

    Should the modal appear open.

    Type
    boolean
    Default
    false
  • width

    Sets the max-width of the modal container.

    Type

    This prop can be one of the following 3 types:

    • 'narrow'
    • 'medium'
    • 'wide'
    Default
    'medium'
  • heightAboveSmall

    Sets height of the modal container above small viewport. If auto (default), the modal height will be determined by its content. Otherwise, the modal height will be fixed at some constant px.

    Type

    This prop can be one of the following 3 types:

    • 'auto'
    • 'medium'
    • 'tall'
    Default
    'auto'
Was this page helpful?

We use this feedback to improve the quality of our documentation.