React Bootstrap Close Icon

React Close Icon - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap close icon is an element which is used for dismissing components like modals and alerts. See how easy implementation is.

Basic example

Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label.

            import React from "react";
            import { MDBCloseIcon } from "mdbreact"

            const CloseIconPage = () => {
              return (
                <MDBCloseIcon />

            export default CloseIconPage;

React Close Icon - API

In this section you will find advanced information about the Close Icon component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Close Icon import statement

In order to use Close Icon component make sure you have imported proper module first.

        import { MDBCloseIcon } from 'mdbreact';

Close Icon PropTypes

The table below shows the configuration options of the Close Icon component.

Name Type Default Description Example
ariaLabel string Close Defines a string that labels the button element <MDBCloseIcon ariaLabel="Dismiss" ... />
className string Adds custom class to the close button <MDBCloseIcon className="myClass" ... />
onClick function Uses function as a callback for the "click" event <MDBCloseIcon onClick={e => muCustomFunction('sth', e)} ... />