Using mini buttons for edit/delete

Modules/Core/Assets/js/components/DeleteComponent.vue

 <template>
-    <el-button type="danger" @click="deleteRow" size="small"><i class="fa fa-trash"></i></el-button>
+    <el-button type="danger" @click="deleteRow" size="mini"><i class="fa fa-trash"></i></el-button>
 </template>
 
 <script>
     export default {
         props: {
-            rows: {default: null},
-            scope: {default: null},
+            rows: { default: null },
+            scope: { default: null },
         },
         data() {
             return {
                 deleteMessage: '',
                 deleteTitle: '',
-            }
+            };
         },
         methods: {
             deleteRow(event) {
@@ -22,35 +22,35 @@
                     type: 'warning',
                     confirmButtonClass: 'el-button--danger',
                 }).then(() => {
-                    let vm = this;
+                    const vm = this;
                     axios.delete(this.scope.row.urls.delete_url)
-                        .then(response => {
+                        .then((response) => {
                             if (response.data.errors === false) {
                                 vm.$message({
                                     type: 'success',
-                                    message: response.data.message
+                                    message: response.data.message,
                                 });
 
                                 vm.rows.splice(vm.scope.$index, 1);
                             }
                         })
-                        .catch(error => {
+                        .catch((error) => {
                             vm.$message({
                                 type: 'error',
-                                message: error.data.message
+                                message: error.data.message,
                             });
                         });
                 }).catch(() => {
                     this.$message({
                         type: 'info',
-                        message: this.trans('core.delete cancelled')
+                        message: this.trans('core.delete cancelled'),
                     });
                 });
-            }
+            },
         },
         mounted() {
             this.deleteMessage = this.trans('core.modal.confirmation-message');
             this.deleteTitle = this.trans('core.modal.title');
-        }
-    }
+        },
+    };
 </script>

Modules/Core/Assets/js/components/EditButtonComponent.vue

 <template>
     <el-button
-            size="small"
+            size="mini"
             @click.prevent="goToEditPage()">
         <i class="fa fa-pencil"></i>
     </el-button>
@@ -9,12 +9,12 @@
 <script>
     export default {
         props: {
-            to: {type: Object, required: true}
+            to: { type: Object, required: true },
         },
         methods: {
             goToEditPage() {
                 this.$router.push(this.to);
             },
         },
-    }
+    };
 </script>

public/js/app.js

@@ -117157,7 +117157,7 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c(
     "el-button",
-    { attrs: { type: "danger", size: "small" }, on: { click: _vm.deleteRow } },
+    { attrs: { type: "danger", size: "mini" }, on: { click: _vm.deleteRow } },
     [_c("i", { staticClass: "fa fa-trash" })]
   )
 }
@@ -117260,7 +117260,7 @@ var render = function() {
   return _c(
     "el-button",
     {
-      attrs: { size: "small" },
+      attrs: { size: "mini" },
       on: {
         click: function($event) {
           $event.preventDefault()