add color w default blue to coloredbutton

src/components/BaseComponents/ColoredButton.vue

 <template>
   <button
-    class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+    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"
   >
     {{ text }}
   </button>
@@ -11,6 +12,21 @@ export default {
   name: "ColoredButton",
   props: {
     text: String,
+    buttonColor: {
+      type: String,
+      default: "blue",
+    },
+  },
+  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>