Close button

React Bootstrap 5 Close button component

Responsive Close button built with Bootstrap 5, React 18 and Material Design 2.0. Examples with usage of close button component to dismiss content of modals, alerts, and popovers.

Basic example

        
            
            import React from 'react';
            import { MDBBtn } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBBtn className="btn-close" color="none" aria-label="Close" />
              );
            }

Disabled

Disabled close buttons change their opacity. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering. 

        
            
            import React from 'react';
            import { MDBBtn } from 'mdb-react-ui-kit';
            
            export default function App() {
              return (
                <MDBBtn className="btn-close" color="none" disabled aria-label="Close" />
              );
            }

White variant

Add btn-close-white class to change color on dark backround.

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
          
          export default function App() {
            return (
              <>
                <MDBBtn className="btn-close btn-close-white" color="none" aria-label="Close" />
                <MDBBtn className="btn-close btn-close-white" color="none" aria-label="Close" disabled />
              </>
            );
          }