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.

Show code

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

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

            export default CloseIconPage;

Introduction
Basic example

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.

Show code

        
            
        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)} ... />`