Close button

React Bootstrap 5 Close button component

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

Basic example

Provide an option to dismiss or close a component with .btn-close.

Show code

        
            
            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 prevent hover and active states from triggering.

Show code

        
            
            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 background.

Show code

        
            
          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 />
              </>
            );
          }