package.json

 {
   "name": "@coscine/component-library",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "./dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

src/components/Buttons/Delete.vue

@@ -8,7 +8,7 @@ import BootstrapVue from 'bootstrap-vue';
 Vue.use(BootstrapVue);
 
 export default Vue.extend({
-  name: 'CoscineDelete',
+  name: 'CoscineButtonDelete',
   props: {
     btnText: {
       default: 'Delete',

src/components/Modal/Modal.vue

+<template>
+  <div>
+    <b-modal
+      :visible="value"
+      @change="$emit('input', $event.target.value)"
+      :title="title"
+      @hidden="hideModal"
+      hide-footer>
+      <div>
+        {{ headerText }}
+      </div>
+      <slot></slot>
+    </b-modal>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
+Vue.use(BootstrapVue);
+
+export default Vue.extend({
+  name: 'CoscineModal',
+  props: {
+      value: Boolean,
+      title: String,
+      headerText: String,
+  },
+  methods: {
+    hideModal() {
+      this.$emit('input', false);
+    },
+  },
+});
+</script>
+
+<style>
+.modal-dialog {
+    top: 4rem;
+  }
+.modal-header .modal-title {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-left: 0;
+}
+.modal-header button.close {
+  text-align: end;
+  min-width: 1rem;
+}
+.modal-body {
+  padding: 1rem;
+  padding-top: 0;
+}
+.modal-body .btn {
+  margin: 0;
+}
+</style>
\ No newline at end of file

src/index.ts

@@ -7,3 +7,4 @@ export { default as CoscineLoadingBar } from './components/Loader/LoadingBar.vue
 export { default as CoscineLoadingSpinner } from './components/Loader/LoadingSpinner.vue';
 export { default as CoscinePageFooter } from './components/Page/Footer.vue';
 export { default as CoscinePageHeader } from './components/Page/Header.vue';
+export { default as CoscineModal } from './components/Modal/Modal.vue';