diff --git a/frontend/src/components/UI/ButtonRow.vue b/frontend/src/components/UI/ButtonRow.vue
index 1a5a6d539c21..3454220d88a0 100644
--- a/frontend/src/components/UI/ButtonRow.vue
+++ b/frontend/src/components/UI/ButtonRow.vue
@@ -3,10 +3,24 @@
     <template v-slot:extension>
       <v-col></v-col>
       <div v-if="open">
-        <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipe">
+        <v-btn
+          class="mr-2"
+          fab
+          dark
+          small
+          color="error"
+          @click="deleteRecipeConfrim"
+        >
           <v-icon>mdi-delete</v-icon>
-          <Confirmation ref="confirm" />
         </v-btn>
+        <Confirmation
+          title="Delete Recpie"
+          message="Are you sure you want to delete this recipie?"
+          color="error"
+          icon="mdi-alert-circle"
+          ref="deleteRecipieConfirm"
+          v-on:confirm="deleteRecipe()"
+        />
 
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
@@ -26,11 +40,12 @@
 export default {
   props: {
     open: {
-      default: true,
-    },
+      type: Boolean,
+      default: true
+    }
   },
   components: {
-    Confirmation: () => import("../UI/Confirmation"),
+    Confirmation: () => import("../UI/Confirmation")
   },
   methods: {
     editor() {
@@ -39,21 +54,16 @@ export default {
     save() {
       this.$emit("save");
     },
-    async deleteRecipe() {
-      if (
-        await this.$refs.confirm.open(
-          "Delete Recpie",
-          "Are you sure you want to delete this recipie?",
-          { color: "error", icon: "mdi-alert-circle" }
-        )
-      ) {
-        this.$emit("delete");
-      }
+    deleteRecipeConfrim() {
+      this.$refs.deleteRecipieConfirm.open();
+    },
+    deleteRecipe() {
+      this.$emit("delete");
     },
     json() {
       this.$emit("json");
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/frontend/src/components/UI/Confirmation.vue b/frontend/src/components/UI/Confirmation.vue
index 46fe6ae70d85..ef46e11d9336 100644
--- a/frontend/src/components/UI/Confirmation.vue
+++ b/frontend/src/components/UI/Confirmation.vue
@@ -1,14 +1,15 @@
+
 <template>
   <v-dialog
     v-model="dialog"
-    :max-width="options.width"
-    :style="{ zIndex: options.zIndex }"
+    :max-width="width"
+    :style="{ zIndex: zIndex }"
     @click:outside="cancel"
     @keydown.esc="cancel"
   >
     <v-card>
-      <v-toolbar v-if="Boolean(title)" :color="options.color" dense flat>
-        <v-icon v-if="Boolean(options.icon)" left> {{ options.icon }}</v-icon>
+      <v-toolbar v-if="Boolean(title)" :color="color" dense flat>
+        <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
         <v-toolbar-title v-text="title" />
       </v-toolbar>
 
@@ -21,51 +22,106 @@
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
-        <v-btn :color="options.color" text @click="confirm"> Confirm </v-btn>
+        <v-btn :color="color" text @click="confirm"> Confirm </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
+/**
+ * Confirmation Component used to add a second validaion step to an action.
+ * @version 1.0.1
+ * @author [zackbcom](https://github.com/zackbcom)
+ * @since Version 1.0.0
+ */
 export default {
   name: "Confirmation",
-  data: () => ({
-    dialog: false, // Wether to show or not
-    resolve: null,
-    reject: null,
-    message: null,
-    title: null,
-    options: {
-      color: "error",
-      icon: "mdi-alert-circle",
-      width: 400,
-      zIndex: 200,
-      noconfirm: false,
+  props: {
+    /**
+     * Message to be in body.
+     */
+    message: String,
+    /**
+     * Optional Title message to be used in title.
+     */
+    title: String,
+    /**
+     * Optional Icon to be used in title.
+     */
+    icon: {
+      type: String,
+      default: "mid-alert-circle"
     },
+    /**
+     * Color theme of the component. Chose one of the defined theme colors.
+     * @values primary, secondary, accent, success, info, warning, error
+     */
+    color: {
+      type: String,
+      default: "error"
+    },
+    /**
+     * Define the max width of the component.
+     */
+    width: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * zIndex of the component.
+     */
+    zIndex: {
+      type: Number,
+      default: 200
+    }
+  },
+  data: () => ({
+    /**
+     * Keep state of open or closed
+     */
+    dialog: false
   }),
   methods: {
-    open(title, message, options) {
+    /**
+     * Sets the modal to be visiable.
+     */
+    open() {
       this.dialog = true;
-      this.title = title;
-      this.message = message;
-      this.options = Object.assign(this.options, options);
-      return new Promise((resolve, reject) => {
-        this.resolve = resolve;
-        this.reject = reject;
-      });
     },
 
+    /**
+     * Cancel button handler.
+     */
     cancel() {
-      this.resolve(false);
+      /**
+       * Cancel event.
+       *
+       * @event Cancel
+       * @property {string} content content of the first prop passed to the event
+       */
+      this.$emit("cancel");
+
+      //Hide Modal
       this.dialog = false;
     },
 
+    /**
+     * confirm button handler.
+     */
     confirm() {
-      this.resolve(true);
+      /**
+       * confirm event.
+       *
+       * @event confirm
+       * @property {string} content content of the first prop passed to the event
+       */
+      this.$emit("confirm");
+
+      //Hide Modal
       this.dialog = false;
-    },
-  },
+    }
+  }
 };
 </script>