Modal

The Modal component is used display a temporary layer above the default content layer. It can be used gather feedback or present additional information that does not fit or belong inside the default content layer.

It is blocking access to the default content layer, so this component will interrupt the current workflow of the user. Make sure to use it wisely.

The Modal is a controlled component that can be shown by setting isVisible to true. Pressing the Escape key, pressing the close button in the header, or clicking on the dark backdrop element that darkens the underlying content layer will trigger the onCancel. Make sure to react to it and to update your state accordingly.

<React.Fragment>
  <Button
    onClick={[Function onClick]}
  >
    Open modal
  </Button>
  <Modal
    header="This is the header"
    isVisible={false}
    onCancel={[Function onCancel]}
  >
    Here goes the content…
  </Modal>
</React.Fragment>

Hiding the header

if you need more control of the buttons that should close the header, it is possible to remove the header by setting showHeader to false.

<React.Fragment>
  <Button
    onClick={[Function onClick]}
  >
    Open modal without a header
  </Button>
  <Modal
    isVisible={false}
    onCancel={[Function onCancel]}
    showHeader={false}
  >
    <div>
      Here goes the content…
    </div>
  </Modal>
</React.Fragment>

Positioning and sizing

<React.Fragment>
  <ControlGroup>
    <ControlGroupItem
      label="attach"
    >
      <Dropdown
        onChange={[Function onChange]}
        options={
          Array [
            Object {
              "label": "right",
              "value": "right",
            },
            Object {
              "label": "left",
              "value": "left",
            },
            Object {
              "label": "center",
              "value": "center",
            },
          ]
        }
        value="right"
      />
    </ControlGroupItem>
    <ControlGroupItem
      label="size"
    >
      <Dropdown
        onChange={[Function onChange]}
        options={
          Array [
            Object {
              "label": "sm",
              "value": "sm",
            },
            Object {
              "label": "md",
              "value": "md",
            },
            Object {
              "label": "lg",
              "value": "lg",
            },
            Object {
              "label": "fullscreen",
              "value": "fullscreen",
            },
          ]
        }
        value="sm"
      />
    </ControlGroupItem>
  </ControlGroup>
  <Button
    onClick={[Function onClick]}
  >
    Open modal
  </Button>
  <Modal
    attach="right"
    isVisible={false}
    onCancel={[Function onCancel]}
    size="sm"
  >
    This is a modal attached to 
    right
    .
  </Modal>
</React.Fragment>