How to Change the React-Bootstrap Modal Close Button (2 Ways!)

The React-Bootstrap Modal can be styled and customized in a variety of ways. We can even change the close button that is in the Modal.Header component if we use creative CSS.

Here’s one of the close buttons we will build:

The tricky thing is that there are no props for setting what image or icon is shown for the modal close button. I dug deep into the props and found that there is a prop called closeVariant, but that only controls the color of the button.

Full code for this tutorial is available in the Resources section.

Change the React-Bootstrap Modal Close Button with a Background Image

By default Bootstrap applies class btn-close on the close button, so we can examine the DOM and see the current styling:

The “X” of the close button is applied with the background style. This means we can override this to create a different look, image, or icon feel to the button.

Here’s some simple code that targets the btn-close class and sets the background property to an image from the free image supplier “Lorem Picsum“.

.btn-close {
  background:  transparent url('https://picsum.photos/25/25');
}

You can supply any custom image for the close button, just make sure that the dimensions fit. Customizing the image does not affect the button click functionality, this can be done using the onHide prop.

Here’s how to remove the backdrop with a simple prop.

Change the React-Bootstrap Modal Close Button with :after Pseudo-Element Content

We can also customize the React-Bootstrap modal close button by targeting the :after pseudo-element on the close button. I prefer this method because there are lots of icons available (they are technically called unicode symbols). Here’s the code:

.btn-close {
  background: none;
}

.btn-close:after {
  content: "\2705";
  position: relative;
  left: -3px;
  top: -3px;
}

In the btn-close selector we are overriding the default btn-close styling by setting background: none. This is necessary because the default “X” image will still be imported if we don’t.

Next we have to set the unicode value in the content of the :after pseudo-element. I found that the element was a little low and to the right. I believe it was not respecting the padding of the close button element.

The modal and close button created by this code can be seen in the intro section.

After you customize the close button, try creating a full screen modal.

React Bootstrap Modal Close on Click Outside

If you are having trouble with the React Bootstrap Modal not closing, you need to look at your onHide handler. Clicking outside the modal triggers the onHide handler but you still need to pass a function to the handler that will set the show prop to false.

We can see purpose of the onHide handler explained in the type definition and tip above.

The onHide trigger on click outside the modal is built into the React Bootstrap modal and I did not add any code to enable this.

React Bootstrap Modal Not Closing

If the modal is not closing, examine the onHide handler and the show prop. The show prop needs to be set to a Boolean value, and the onHide handler is usually the place to set the show prop.

This example in the React Bootstrap docs shows a good method of using React hooks to handle the hiding and showing of the modal.

Resources

The modal close button has some hover styling by default. Read here about React-Bootstrap icon hover effects and vanilla Bootstrap button hover effects.

Full code for this demo:

//CustomCloseButtonModal.tsx
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import "./CustomCloseButtonModal.scss";

export default function CustomCloseButtonModal() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header
          closeButton
        //closeVariant='white'
        >
          <Modal.Title>Nice Close Button!</Modal.Title>
        </Modal.Header>
        <Modal.Body>Try the close button in the header!</Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={handleClose}>
            (Not this close button)
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

//CustomCloseButtonModal.scss
@import "bootstrap/scss/bootstrap";

.btn-close {
  background:  transparent url('https://picsum.photos/25/25');
}

// .btn-close {
//   background: none;
// }

// .btn-close:after {
//   content: "\2705";
//   position: relative;
//   left: -3px;
//   top: -3px;
// }