Modal

See React Bootstrap/Modals for full documentation and props.

The Modal component can have many possible variations. The most basic usage is to render a Modal with all content in the body and an optional Modal.Icon.

The Modal.Icon component can by styled by providing a variant prop. The default variant is 'info'.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Show modal</Button> <Modal show={show} onHide={() => setShow(false)} size="lg"> <Modal.Body> <div className="d-flex"> <div className="me-3"> <Modal.Icon> <span className="icon-message-circle-02" /> </Modal.Icon> </div> <div> <strong className="fs-xxl">Title</strong> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </Modal.Body> <Modal.Footer> <Button variant="primary" onClick={() => setShow(false)}> Dismiss </Button> </Modal.Footer> </Modal> </> ); }

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <>
      <Button onClick={() => setShow(true)}>Show modal</Button>

      <Modal show={show} onHide={() => setShow(false)} size="lg">
        <Modal.Body>
          <div className="d-flex">
            <div className="me-3">
              <Modal.Icon>
                <span className="icon-message-circle-02" />
              </Modal.Icon>
            </div>
            <div>
              <strong className="fs-xxl">Title</strong>
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </Modal.Body>

        <Modal.Footer>
          <Button variant="primary" onClick={() => setShow(false)}>
            Dismiss
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Modal with header

When using the Modal.Header component the Modal.Icon should be placed within the header to the left of the Modal.Title.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Show modal</Button> <Modal show={show} onHide={() => setShow(false)} size="lg"> <Modal.Header closeButton> <div className="d-flex"> <div className="me-3"> <Modal.Icon> <span className="icon-message-circle-02" /> </Modal.Icon> </div> <Modal.Title>Title</Modal.Title> </div> </Modal.Header> <Modal.Body> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Modal.Body> <Modal.Footer> <span className="text-gray-500 me-3">Line of context for the buttons</span> <Button variant="outline-secondary" onClick={() => setShow(false)}> Cancel </Button> <Button variant="primary" onClick={() => setShow(false)}> Save </Button> </Modal.Footer> </Modal> </> ); }

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <>
      <Button onClick={() => setShow(true)}>Show modal</Button>

      <Modal show={show} onHide={() => setShow(false)} size="lg">
        <Modal.Header closeButton>
          <div className="d-flex">
            <div className="me-3">
              <Modal.Icon>
                <span className="icon-message-circle-02" />
              </Modal.Icon>
            </div>

            <Modal.Title>Title</Modal.Title>
          </div>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Modal.Body>

        <Modal.Footer>
          <span className="text-gray-500 me-3">Line of context for the buttons</span>
          <Button variant="outline-secondary" onClick={() => setShow(false)}>
            Cancel
          </Button>
          <Button variant="primary" onClick={() => setShow(false)}>
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Centered and stacked

This variation of the Modal moves the content of the footer into the body and centers all content vertically. Using the d-grid utility class around Buttons will force them to take the full width of their container.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Show modal</Button> <Modal show={show} onHide={() => setShow(false)} centered> <Modal.Body> <div className="d-flex flex-column align-items-center"> <div className="mb-3"> <Modal.Icon variant="danger"> <span className="icon-alert-triangle" /> </Modal.Icon> </div> <div className="mb-3"> <strong className="fs-xxl">Deactivate account</strong> </div> </div> <div className="text-center mb-5"> Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone. </div> <div className="d-grid"> <Button variant="outline-secondary" className="mb-3" onClick={() => setShow(false)}> Cancel </Button> <Button variant="primary" onClick={() => setShow(false)}> Deactivate </Button> </div> </Modal.Body> </Modal> </> ); }

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <>
      <Button onClick={() => setShow(true)}>Show modal</Button>

      <Modal show={show} onHide={() => setShow(false)} centered>
        <Modal.Body>
          <div className="d-flex flex-column align-items-center">
            <div className="mb-3">
              <Modal.Icon variant="danger">
                <span className="icon-alert-triangle" />
              </Modal.Icon>
            </div>
            <div className="mb-3">
              <strong className="fs-xxl">Deactivate account</strong>
            </div>
          </div>

          <div className="text-center mb-5">
            Are you sure you want to deactivate your account? All of your data will be permanently
            removed from our servers forever. This action cannot be undone.
          </div>

          <div className="d-grid">
            <Button variant="outline-secondary" className="mb-3" onClick={() => setShow(false)}>
              Cancel
            </Button>
            <Button variant="primary" onClick={() => setShow(false)}>
              Deactivate
            </Button>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
}

Other footer configurations

Interactive footer content (checkboxes or links) should be positioned to the start of the footer. The buttons should be remain positioned to the end of the footer.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Show modal</Button> <Modal show={show} onHide={() => setShow(false)} size="lg"> <Modal.Header closeButton> <div className="d-flex"> <div className="me-3"> <Modal.Icon> <span className="icon-user-circle" /> </Modal.Icon> </div> <Modal.Title>Save account</Modal.Title> </div> </Modal.Header> <Modal.Body> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Modal.Body> <Modal.Footer className="d-flex justify-content-between"> <div> <Checkbox label="Remember me" /> </div> <div> <Button variant="outline-secondary" onClick={() => setShow(false)}> Cancel </Button> <Button variant="primary" onClick={() => setShow(false)}> Save </Button> </div> </Modal.Footer> </Modal> </> ); }

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <>
      <Button onClick={() => setShow(true)}>Show modal</Button>

      <Modal show={show} onHide={() => setShow(false)} size="lg">
        <Modal.Header closeButton>
          <div className="d-flex">
            <div className="me-3">
              <Modal.Icon>
                <span className="icon-user-circle" />
              </Modal.Icon>
            </div>

            <Modal.Title>Save account</Modal.Title>
          </div>
        </Modal.Header>

        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Modal.Body>

        <Modal.Footer className="d-flex justify-content-between">
          <div>
            <Checkbox label="Remember me" />
          </div>
          <div>
            <Button variant="outline-secondary" onClick={() => setShow(false)}>
              Cancel
            </Button>
            <Button variant="primary" onClick={() => setShow(false)}>
              Save
            </Button>
          </div>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Analytics

The Modal component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Modal',
	actions: {
		onHide: { type: 'MODAL_ON_HIDE', payload: 'Hide' },
	},
};

Props

Modal

ModalIcon