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>