Components

Modal(React)

A basic and commonly used modal.

Version:	`14.16.0` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent, ModalContentFullBleed, ModalFooter, ModalAnimatedWrapper } from '@thumbtack/thumbprint-react';`

Modals can be opened or closed with a isOpen prop.

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

function ModalDemoBasic() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [licenseText, setLicenseText] = React.useState('');

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>

                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={setLicenseText}
                                placeholder="XX-XXXX-XXXX"
                                value={licenseText}
                            />
                        </li>
                    </ol>
                </ModalContent>

                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

function ModalDemoBasic() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [licenseText, setLicenseText] = React.useState('');
    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>
                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={setLicenseText}
                                placeholder="XX-XXXX-XXXX"
                                value={licenseText}
                            />
                        </li>
                    </ol>
                </ModalContent>
                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

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

function ModalDemoStickyTall() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>

                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                    </ol>
                </ModalContent>

                <ModalFooter isSticky>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

function ModalDemoStickyTall() {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>
                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                    </ol>
                </ModalContent>
                <ModalFooter isSticky>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

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

function ModalDemoTall() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>

                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                    </ol>
                </ModalContent>

                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

function ModalDemoTall() {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>
                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                    </ol>
                </ModalContent>
                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

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

function ModalDemoNarrow() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                width="narrow"
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>

                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                    </ol>
                </ModalContent>

                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

function ModalDemoNarrow() {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                width="narrow"
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>
                <ModalContent>
                    <ol className="tp-form-fields">
                        <li className="tp-form-field__item">
                            <Label>License type</Label>
                            <Dropdown value="default" isFullWidth onChange={() => {}}>
                                <option value="default">Choose one&hellip;</option>
                            </Dropdown>
                        </li>
                        <li className="tp-form-field__item">
                            <Label for="example-license-number">License number</Label>
                            <TextInput
                                id="example-license-number"
                                onChange={() => {}}
                                placeholder="XX-XXXX-XXXX"
                            />
                        </li>
                    </ol>
                </ModalContent>
                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

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

function ModalDemoFixedHeight() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [showIntroScreen, setShowIntroScreen] = React.useState(true);

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
                heightAboveSmall="medium"
            >
                <ModalHeader>
                    <ModalTitle>{showIntroScreen ? 'First screen' : 'Second screen'}</ModalTitle>
                </ModalHeader>

                <ModalContent>
                    {showIntroScreen ? (
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                                erat, sed diam voluptua.
                            </p>
                            <p>
                                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                                amet.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                                erat, sed diam voluptua.
                            </p>
                            <p>
                                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                                amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                diam nonumy eirmod tempor invidunt ut labore et dolore magna
                                aliquyam erat, sed diam voluptua.
                            </p>
                        </div>
                    ) : (
                        <div>
                            <p>
                                Nam liber tempor cum soluta nobis eleifend option congue nihil
                                imperdiet doming id quod mazim placerat facer possim assum.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                volutpat.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
                                suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                                molestie consequat, vel illum dolore eu feugiat nulla facilisis at
                                vero eros et accumsan et iusto odio dignissim qui blandit praesent
                                luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                volutpat.
                            </p>
                            <p>
                                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                                amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                diam nonumy eirmod tempor invidunt ut labore et dolore magna
                                aliquyam erat, sed diam voluptua.
                            </p>
                            <p>
                                Nam liber tempor cum soluta nobis eleifend option congue nihil
                                imperdiet doming id quod mazim placerat facer possim assum.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    )}
                </ModalContent>

                <ModalFooter isSticky>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        {!showIntroScreen && (
                            <Button
                                onClick={() => setShowIntroScreen(true)}
                                width="full-below-small"
                                theme="secondary"
                            >
                                Go back
                            </Button>
                        )}
                        <Button
                            onClick={
                                showIntroScreen
                                    ? () => setShowIntroScreen(false)
                                    : () => setIsOpen(false)
                            }
                            width="full-below-small"
                        >
                            {showIntroScreen ? 'Next' : 'Submit'}
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

function ModalDemoFixedHeight() {
    const [isOpen, setIsOpen] = React.useState(false);
    const [showIntroScreen, setShowIntroScreen] = React.useState(true);
    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
                heightAboveSmall="medium"
            >
                <ModalHeader>
                    <ModalTitle>{showIntroScreen ? 'First screen' : 'Second screen'}</ModalTitle>
                </ModalHeader>
                <ModalContent>
                    {showIntroScreen ? (
                        <div>
                            <p>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                                erat, sed diam voluptua.
                            </p>
                            <p>
                                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                                amet.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                                erat, sed diam voluptua.
                            </p>
                            <p>
                                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                                amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                diam nonumy eirmod tempor invidunt ut labore et dolore magna
                                aliquyam erat, sed diam voluptua.
                            </p>
                        </div>
                    ) : (
                        <div>
                            <p>
                                Nam liber tempor cum soluta nobis eleifend option congue nihil
                                imperdiet doming id quod mazim placerat facer possim assum.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                volutpat.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
                                suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                                molestie consequat, vel illum dolore eu feugiat nulla facilisis at
                                vero eros et accumsan et iusto odio dignissim qui blandit praesent
                                luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                volutpat.
                            </p>
                            <p>
                                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                                kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                                amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                diam nonumy eirmod tempor invidunt ut labore et dolore magna
                                aliquyam erat, sed diam voluptua.
                            </p>
                            <p>
                                Nam liber tempor cum soluta nobis eleifend option congue nihil
                                imperdiet doming id quod mazim placerat facer possim assum.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    )}
                </ModalContent>
                <ModalFooter isSticky>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        {!showIntroScreen && (
                            <Button
                                onClick={() => setShowIntroScreen(true)}
                                width="full-below-small"
                                theme="secondary"
                            >
                                Go back
                            </Button>
                        )}
                        <Button
                            onClick={
                                showIntroScreen
                                    ? () => setShowIntroScreen(false)
                                    : () => setIsOpen(false)
                            }
                            width="full-below-small"
                        >
                            {showIntroScreen ? 'Next' : 'Submit'}
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

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.

function ModalDemoFullBleed() {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>

                <ModalContent>
                    <ModalContentFullBleed
                        style={{
                            backgroundColor: tokens.tpColorGray200,
                            borderTop: `1px solid ${tokens.tpColorGray}`,
                            borderBottom: `1px solid ${tokens.tpColorGray}`,
                            paddingTop: '20px',
                            paddingBottom: '20px',
                        }}
                    >
                        <ol className="tp-form-fields">
                            <li className="tp-form-field__item">
                                <Label>License type</Label>
                                <Dropdown value="default" isFullWidth onChange={() => {}}>
                                    <option value="default">Choose one&hellip;</option>
                                </Dropdown>
                            </li>
                            <li className="tp-form-field__item">
                                <Label for="example-license-number">License number</Label>
                                <TextInput
                                    id="example-license-number"
                                    onChange={() => {}}
                                    placeholder="XX-XXXX-XXXX"
                                />
                            </li>
                        </ol>
                    </ModalContentFullBleed>
                </ModalContent>

                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

function ModalDemoFullBleed() {
    const [isOpen, setIsOpen] = React.useState(false);
    return (
        <React.Fragment>
            <Button
                onClick={() => {
                    setIsOpen(true);
                }}
            >
                Open modal
            </Button>
            <Modal
                isOpen={isOpen}
                onCloseClick={() => {
                    setIsOpen(false);
                }}
                onCloseFinish={() => {
                    console.log('Modal onCloseFinish');
                }}
                onOpenFinish={() => {
                    console.log('Modal onOpenFinish');
                }}
            >
                <ModalHeader>
                    <ModalTitle>Add a professional license</ModalTitle>
                    <ModalDescription>
                        Licenses add credibility to your business and provide more trust for
                        customers.
                    </ModalDescription>
                </ModalHeader>
                <ModalContent>
                    <ModalContentFullBleed
                        style={{
                            backgroundColor: tokens.tpColorGray200,
                            borderTop: `1px solid ${tokens.tpColorGray}`,
                            borderBottom: `1px solid ${tokens.tpColorGray}`,
                            paddingTop: '20px',
                            paddingBottom: '20px',
                        }}
                    >
                        <ol className="tp-form-fields">
                            <li className="tp-form-field__item">
                                <Label>License type</Label>
                                <Dropdown value="default" isFullWidth onChange={() => {}}>
                                    <option value="default">Choose one&hellip;</option>
                                </Dropdown>
                            </li>
                            <li className="tp-form-field__item">
                                <Label for="example-license-number">License number</Label>
                                <TextInput
                                    id="example-license-number"
                                    onChange={() => {}}
                                    placeholder="XX-XXXX-XXXX"
                                />
                            </li>
                        </ol>
                    </ModalContentFullBleed>
                </ModalContent>
                <ModalFooter>
                    <ButtonRow justify="right" isStackedBelowSmall>
                        <Button onClick={() => setIsOpen(false)} width="full-below-small">
                            Submit
                        </Button>
                    </ButtonRow>
                </ModalFooter>
            </Modal>
        </React.Fragment>
    );
}

Props

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'

Modal(React)

Modal variations

Basic modal with a form

Tall modal with a sticky footer

Tall modal without a sticky footer

Narrow modal

Modal with fixed height

Full bleed modal