Close button

Vue Bootstrap 5 Close button

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


Basic example


          <template>
            <MDBBtnClose />
          </template>
        

          <script>
            import { MDBBtnClose } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBBtnClose,
              },
            };
          </script>
        

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.


          <template>
            <MDBBtnClose disabled />
          </template>
        

          <script>
            import { MDBBtnClose } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBBtnClose,
              },
            };
          </script>
        

White variant

Add white property to change color on dark background.


          <template>
            <MDBBtnClose white />
            <MDBBtnClose white disabled />
          </template>
        

          <script>
            import { MDBBtnClose } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBBtnClose,
              },
            };
          </script>