Merge pull request #21 from traPtitech/feat/button-component

ボタンコンポーネントの実装

src/components/UI/BaseButton.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+
+type ButtonType = 'primary' | 'secondary' | 'danger'
+
+interface Props {
+  type?: ButtonType
+  icon?: string
+  isDisabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  icon: undefined,
+  isDisabled: false
+})
+</script>
+
+<template>
+  <button
+    :class="$style.button"
+    :data-button-type="props.type"
+    :disabled="props.isDisabled"
+  >
+    <icon v-if="props.icon" :name="props.icon" :class="$style.icon" />
+    <slot />
+  </button>
+</template>
+
+<style lang="scss" module>
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 24px;
+  border-radius: 6px; // todo:%で指定に変えるかも
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
+  transition: 0.2s ease-in-out;
+
+  &[data-button-type='primary'] {
+    color: $color-primary-text;
+    background-color: $color-primary;
+  }
+  &[data-button-type='secondary'] {
+    color: $color-primary;
+    background-color: $color-background;
+    border: 1px solid $color-primary;
+  }
+  &[data-button-type='danger'] {
+    color: $color-primary-text;
+    background-color: $color-danger;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  display: flex;
+}
+</style>

src/styles/common.scss

@@ -7,3 +7,5 @@ $color-secondary-text: #333E47;
 $color-background: #FFFFFF;
 $color-background-dim: #eff0f0;
 $color-text: #222425;
+
+$color-danger:#F26451;