Houzz UI

Basic usage

In it's current form, Modal is usable for single modals that you control yourself. While this is still in development, consider using jukwaa-ui if you require more advanced features.

import { Modal } from '@houzz/ui';

function ModalImplementation() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleClose = () => setIsModalOpen(false);

    return (
        <>
            <Button onClick={() => setIsModalOpen(true)}>Open modal</Button>
            <Modal
                aria-labelledby="modal-title"
                aria-describedby="modal-description"
                isOpen={isModalOpen}
                onClose={handleClose}
            >
                <ModalTitle id="modal-title">Header</ModalTitle>
                <ModalContent id="modal-description">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                    dicta sunt explicabo.
                </ModalContent>
                <ModalActions>
                    <Button onClick={handleClose} variant="link" colorVariant="neutral">
                        Cancel
                    </Button>
                    <Button>Save</Button>
                </ModalActions>
            </Modal>
        </>
    );
}

function ModalImplementation() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleClose = () => setIsModalOpen(false);

    return (
        <>
            <Button onClick={() => setIsModalOpen(true)}>Open modal</Button>
            <Modal
                aria-labelledby="modal-title"
                aria-describedby="modal-description"
                isOpen={isModalOpen}
                onClose={handleClose}
            >
                <ModalTitle id="modal-title">Header</ModalTitle>
                <ModalContent id="modal-description">
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                    dicta sunt explicabo.
                </ModalContent>
                <ModalActions>
                    <Button onClick={handleClose} variant="link" colorVariant="neutral">
                        Cancel
                    </Button>
                    <Button>Save</Button>
                </ModalActions>
            </Modal>
        </>
    );
}

Close Icon

The close icon is supported through composition, using DismissButton.

import { Modal } from '@houzz/ui';

function ModalImplementation() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleClose = () => setIsModalOpen(false);

    return (
        <>
            <Button onClick={() => setIsModalOpen(true)}>Open modal</Button>
            <Modal
                aria-labelledby="modal-title"
                aria-describedby="modal-description"
                isOpen={isModalOpen}
                onClose={handleClose}
            >
                <DismissButton
                    aria-label="Close"
                    colorVariant="deemphasized"
                    position="absolute"
                    top="XXL"
                    right="XXL"
                    mt="XXS"
                    onClick={handleClose}
                />
                <ModalTitle id="modal-title">Close Me!</ModalTitle>
                <ModalContent id="modal-description">Click the top-right icon to dismiss this modal</ModalContent>
            </Modal>
        </>
    );
}

function ModalImplementation() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleClose = () => setIsModalOpen(false);

    return (
        <>
            <Button onClick={() => setIsModalOpen(true)}>Open modal</Button>
            <Modal
                aria-labelledby="modal-title"
                aria-describedby="modal-description"
                isOpen={isModalOpen}
                onClose={handleClose}
            >
                <DismissButton
                    aria-label="Close"
                    colorVariant="deemphasized"
                    position="absolute"
                    top="XXL"
                    right="XXL"
                    mt="XXS"
                    onClick={handleClose}
                />
                <ModalTitle id="modal-title">Close Me!</ModalTitle>
                <ModalContent id="modal-description">Click the top-right icon to dismiss this modal</ModalContent>
            </Modal>
        </>
    );
}

Accessibility

Make sure to specify a aria-labelledby attribute pointing to the ModalTitle
You may also specify a aria-describedby attribute
When modal is opened, should focus first interactive element
Content behind the modal should not be interactive
Focus should be trapped inside modal
When modal is closed, should return focus to previously focused element
Modal should be closed when clicking on Backdrop or when pressing ESC key

Modal best practices

Props

Modal

Name	Type	Description
`gradient`	`ResponsiveValue<BackgroundProperty<TLengthStyledSystem>, Required<Theme<TLengthStyledSystem>>>`	-
`children*`	`ReactNode`	Prefer the following components when possible to get the correct styling \<ModalTitle /> \<ModalContent /> \<ModalActions />
`isOpen`	`boolean`	Can be omitted if you want to do {isOpen && \<Modal />} instead `true`
`onClose*`	`(event: MouseEvent \| KeyboardEvent) => void`	Called when clicking outside the popover or when pressing the ESC key
`disableCloseOnBackdropClick`	`boolean`	If `true`, clicking on the backdrop will not fire the `onClose` callback `false`
`disableCloseOnEsc`	`boolean`	If `true`, hitting ESC key will not fire the `onClose` callback `false`
`role`	`"dialog" \| "alertdialog"`	Allows changing the 'dialog' role to 'alertdialog'. The alertdialog role is used to notify users of urgent information that demands the user's immediate attention. Examples include error messages that require confirmation and other action confirmation prompts. @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role `"dialog"`
`wrapperProps`	`StyledComponentPropsWithAs<string \| ComponentType<any>, any, BoxProps, never, string \| ComponentType<any>> & { ...; }`	These props will be passed on the modal wrapper element. This can be used, for example, to add a custom class name or to override the z-index.

ModalDev

Basic usage

Close Icon

Accessibility

Props