Close button

React Bootstrap 5 Close button component

Responsive React Close button built with the latest Bootstrap 5. Multiple code examples, a user-friendly guide, extensive API, and customization tools.

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

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

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">Button</MDBBtn>
                <MDBBtn className="btn-close btn-close-white" color="none" aria-label="Close" disabled>Button</MDBBtn>
              </>
            );
          }