Community admin

src/components/BaseComponents/IconButton.vue

 <template>
-  <!-- Icon button -->
   <button
-    class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
+    class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80"
+    :class="color"
   >
-    <div class="flex flex-row px-5 py-2.5 h-10">
-      <!-- Icon slot: Default content "Ban"-icon -->
-      <div class="h-6 w-6">
-        <slot>
-          <BanIcon />
-        </slot>
-      </div>
-      <p>{{ text }}</p>
+    <div class="w-5 h-5 mx-1">
+      <slot><BanIcon /></slot>
     </div>
+    <span class="mx-1">{{ text }}</span>
   </button>
 </template>
 
@@ -22,9 +17,21 @@ export default {
   name: "IconButton",
   props: {
     text: String,
+    buttonColor: String,
   },
   components: {
     BanIcon,
   },
+  computed: {
+    color() {
+      if (this.buttonColor === "red") {
+        return "bg-error-medium hover:bg-error-dark focus:ring-error-light";
+      }
+      if (this.buttonColor === "green") {
+        return "bg-success-medium hover:bg-success-dark focus:ring-success-light";
+      }
+      return "bg-primary-medium hover:bg-primary-dark focus:ring-primary-light";
+    },
+  },
 };
 </script>