add buttons

docs/src/components/Btn/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <component :is="tag" v-bind="props" :class="`btn btn--${type}`">
+    <icon
+      class="btn__icon"
+      :name="icon"
+      v-if="icon && iconPosition === 'before'"
+    />
+    <span class="btn__text">
+      <slot />
+    </span>
+    <icon
+      class="btn__icon"
+      :name="icon"
+      v-if="icon && iconPosition === 'after'"
+    />
+  </component>
+</template>
+
+<script>
+import Icon from '~/components/Icon'
+
+export default {
+  components: {
+    Icon,
+  },
+
+  props: {
+    to: {
+      default: null,
+      type: String,
+    },
+
+    type: {
+      default: 'primary',
+      type: String,
+    },
+
+    icon: {
+      type: String,
+      default: null,
+    },
+
+    iconPosition: {
+      type: String,
+      default: 'after',
+    },
+  },
+
+  computed: {
+    tag() {
+      if (this.to) {
+        return 'g-link'
+      }
+
+      return 'button'
+    },
+
+    props() {
+      if (this.to) {
+        return {
+          to: this.to,
+        }
+      }
+
+      return {
+        type: 'button',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

docs/src/components/Btn/style.scss

@@ -0,0 +1,58 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  font-weight: 700;
+  margin-left: 0.75rem;
+  padding: 0.8rem 1rem;
+  font-size: 1rem;
+  text-align: center;
+  line-height: 1;
+  text-decoration: none;
+
+  white-space: nowrap;
+
+  &--primary {
+    background-color: $colorBlack;
+    color: $colorWhite;
+    border: 3px solid $colorBlack;
+
+    &:hover {
+      color: $colorWhite;
+    }
+  }
+
+  &--secondary {
+    background-color: $colorWhite;
+    color: $colorBlack;
+    border: 3px solid $colorBlack;
+
+    &:hover {
+      color: $colorBlack;
+    }
+  }
+
+  &--tertiary {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &--tertiary &__icon {
+    opacity: 0.5;
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &__icon {
+    &:first-child {
+      margin-right: 0.5rem;
+    }
+
+    &:last-child {
+      margin-left: 0.5rem;
+    }
+  }
+}