cancel_button

src/app/auth/SignUpPage.vue

@@ -103,15 +103,9 @@
 
         <!-- Submit Button -->
         <div class="mt-2 text-center">
-          <o-button @click="handleCancel" class="b-reset-tw mr-4 mb-2">
-            <div
-              class="inline-flex h-12 w-32 items-center justify-center rounded-full bg-black bg-opacity-5"
-            >
-              <div class="text-base font-bold text-black text-opacity-60">
-                {{ $t("button.cancel") }}
-              </div>
-            </div>
-          </o-button>
+          <t-cancel-button @click="handleCancel" class="mr-4 mb-2 h-12 w-32">
+            {{ $t("button.cancel") }}
+          </t-cancel-button>
 
           <o-button
             :disabled="submitted && Object.keys(errors).length > 0"

src/components/form/cancel_button.vue

@@ -0,0 +1,41 @@
+<template>
+  <button
+    class="inline-flex items-center justify-center rounded-full bg-black bg-opacity-5 text-black text-opacity-60 font-bold"
+    :loading="isLoading"
+    :disabled="isLoading || isDisabled"
+    @click="handleClick"
+  >
+    <ButtonLoading v-if="isLoading" />
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import ButtonLoading from "@/components/Button/Loading.vue";
+export default defineComponent({
+  emits: ["click"],
+  name: "TCancelButton",
+  components: {
+    ButtonLoading,
+  },
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: false,
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup(props, ctx) {
+    const handleClick = () => {
+      ctx.emit("click");
+    };
+    return {
+      handleClick,
+    };
+  },
+});
+</script>

src/main.ts

@@ -17,6 +17,7 @@ import VueGoogleMaps from "@fawmi/vue-google-maps";
 
 import Checkbox from "@/components/form/checkbox.vue";
 import Button from "@/components/form/button.vue";
+import CancelButton from "@/components/form/cancel_button.vue";
 
 // sentry
 import * as Sentry from "@sentry/vue";
@@ -40,6 +41,7 @@ const app = createApp(App);
 app.component(VueQrcode.name ?? "", VueQrcode);
 app.component("t-checkbox", Checkbox);
 app.component("t-button", Button);
+app.component("t-cancel-button", CancelButton);
 
 app.use(VueGoogleMaps, {
   load: {