React Bootstrap Close Icon

React Close Icon - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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