Feat: Add button components

src/components/common/FilledButton.vue

@@ -0,0 +1,56 @@
+<script setup>
+const { type, primary } = defineProps({
+  type: {
+    type: String,
+    default: 'button',
+  },
+  primary: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <button :type="type" :class="primary ? 'primary' : ''">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+button {
+  border: none;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: bold;
+  background-color: var(--color-background-soft);
+  color: var(--color-text-secondary);
+  transition:
+    background-color 0.25s,
+    transform 0.25s;
+}
+
+button.primary {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  button:hover {
+    background-color: var(--color-background-soft);
+  }
+
+  button.primary:hover {
+    background-color: var(--color-primary-soft);
+  }
+}
+
+button:active {
+  transform: scale(0.95);
+}
+
+button.primary:active {
+  background-color: var(--color-primary-soft);
+}
+</style>

src/components/common/TextButton.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from 'vue';
+
+const { type, primary, filled } = defineProps({
+  type: {
+    type: String,
+    default: 'button',
+  },
+  primary: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const classes = computed(() => [primary ? 'primary' : '', filled ? 'filled' : '']);
+</script>
+
+<template>
+  <button :type="type" :class="classes">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+button {
+  border: none;
+  font-size: 14px;
+  font-weight: bold;
+  background: none;
+  padding: 0 4px;
+  color: var(--color-text-secondary);
+  transition: transform 0.25s;
+}
+
+button.primary {
+  color: var(--color-primary);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  button:hover {
+    text-decoration: underline;
+  }
+}
+
+button:active {
+  transform: scale(0.95);
+}
+</style>