Modal

Modal is a window that appears on top of the main content and allows the introduction of secondary flows while maintaining the original context.

import {
  Modal,
  ButtonGroup,
  PrimaryButton,
  QuietButton
} from "@nulogy/components";

Modal.setAppElement("#root");

class ModalExample extends React.Component {
  constructor() {
    super();

    this.state = {
      isOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({ isOpen: true });
  }

  closeModal() {
    this.setState({ isOpen: false });
  }

  render() {
    const { children } = this.props;
    const { isOpen } = this.state;
    const buttons = (
      <ButtonGroup>
        <PrimaryButton type="submit" onClick={}>Save</PrimaryButton>
        <QuietButton onClick={this.closeModal}>Cancel</QuietButton>
      </ButtonGroup>
    );
    return (
      <div>
        <Button onClick={this.openModal}>Open Modal</Button>
        <Modal
          title="Modal Title"
          isOpen={isOpen}
          onRequestClose={closeModal}
          footerContent={buttons}
        >
        Are you sure you'd like to save these settings?
        </Modal>
      </div>
    );
  }
}

Use

  • When important warnings require immediate attention.
  • To prevent irreversible changes by creating friction.
  • To fragment a complex workflow into simpler steps such as creating, editing, etc.

Closing the Modal

To close the modal using the built-in methods, the prop onRequestClose must be passed in. This prop should be the function that closes the modal. By providing this prop all three methods of closing the modal are enabled together: the close button, clicking outside the modal, and pressing the escape key. If you do not provide the onRequestClose prop, ensure that there is another way to close the modal, for example a cancel button.

Accessibility guidelines

In order to hide the rest of the application to screen-readers when the modal is open, make sure to use Modal.setAppElement(el) where el is the root element of the app. This will set aria-hidden=true when the modal is open.

When there is no visible label on the Modal (ie. title prop), you should use the ariaLabel prop to provide a modal label. The aria-labelledby attribute is automatically applied if the title prop is specified. If the modal requires additional description for screen-readers, use the ariaDescribedBy prop.

Responsive information

The Modal component has a width of "100%" and a customizable set maxWidth value. The Modal will force maxWidth to 100% when the screen is smaller than the small breakpoint (768px).

Props

NameTypeDefaultDescription

isOpen

Boolean

true

Controls whether the modal is open or closed.

title

String

null

The title appearing at the top of the modal.

onRequestClose

Function

null

Function that is run when the modal requests to be closed (esc key, clicking outside, clicking close), also renders the close button is passed in.

footerContent

Node

null

The content (usually buttons) to appear at the bottom of the modal.

onAfterOpen

Function

null

Function that is run after the modal has opened.

maxWidth

String

624px

Maximum width of the modal, modal will always compress responsively when the screen shrinks.

shouldFocusAfterRender

Boolean

true

Move focus into the modal when it is rendered.

shouldReturnFocusAfterClose

Boolean

true

Move focus back to what triggered the modal after it closes.

ariaLabel

String

null

String indicating how the modal content should be announced to screenreaders.

ariaDescribedBy

String

null

String indicating the aria description of the modal (optional for enhanced accessibility if needed).

className

String

undefined

className passed to the modal component.

portalClassName

String

undefined

className passed to the portal created for the modal component.

overlayClassName

String

undefined

className passed to the overlay component.

closeAriaLabel

String

close

Aria label on close button

Related components