create button components - incomplete

src/components/Button.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  type: {
+    type: String as () => "button" | "submit" | "reset",
+    default: "button",
+  },
+  onClick: {
+    type: Function as unknown as () => (payload: MouseEvent) => void,
+    default: () => { },
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  styleType: {
+    type: String as () => "filled" | "secondary" | "outline" | "text",
+    default: "filled"
+  }
+});
+
+const buttonStyle = computed(() => {
+  if (props.styleType == 'filled') {
+    return 'hello'
+  }
+})
+</script>
+
+<template>
+  <button :type="type" @click="onClick" :disabled="disabled"
+    :class="['px-4 py-2 mt-2 text-sm font-bold text-white border-transparent rounded-lg bg-primary-500 focus:outline-0 disabled:bg-primary-400', className]">
+    <slot></slot>
+    <span v-if="!isLoading">{{ label }}</span>
+    <span v-else>
+      <center>
+        <lottie-player autoplay loop mode="normal" src="https://assets2.lottiefiles.com/packages/lf20_lNbR6W7kY6.json"
+          style="height:1.2rem"></lottie-player>
+      </center>
+    </span>
+  </button>
+</template>