initial commit

app/components/button/base.vue

@@ -0,0 +1,64 @@
+<template>
+  <button
+    :disabled="disabled"
+    :class="variantClass"
+    @click="$emit('click')"
+  >
+    <slot v-if="!loading"></slot>
+    <slot name="spinner" v-else>
+      <UiSpinnerCpnt />
+    </slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineEmits(['click'])
+
+const props = defineProps<{
+  disabled?: boolean
+  loading?: boolean
+  variant?: 'primary' | 'secondary'
+}>()
+
+const variantClass = computed(() => props.variant === 'secondary' ? 'secondary' : 'primary')
+</script>
+
+<style scoped lang="scss">
+@use "sass:color";
+
+button {
+  margin: 5px 0 2.3em 0;
+  width: 100%;
+  padding: 1em 1.5em;
+  border-radius: 0.5em;
+  color: white;
+  font-weight: bold;
+  border: none;
+  box-sizing: border-box;
+  transition: 0.3s;
+  background: blueviolet;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+    color: color.adjust(blueviolet, $lightness: 15%);
+  }
+
+  &:disabled {
+    background: #bbb;
+    cursor: not-allowed;
+  }
+
+  > div {
+    margin: auto;
+  }
+}
+
+/* Variants */
+button.secondary {
+  background: gray;
+
+  &:hover {
+    color: color.adjust(gray, $lightness: 15%);
+  }
+}
+</style>