frontend/src/components/Basic/CButton.vue

<template>
  <button class="c-button" :class="disabled ? 'disabled' : ''" @click="$emit('click')">
    <span v-if="icon" class="icon">{{icon}}</span>
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: ['icon', 'disabled']
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';

button {
  border: none;
  outline: none;
  background: transparent;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  display: block;
  min-width: 120px;
  height: 40px;
  background: $theme-blue;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  padding: 0 16px;
  font-weight: bold;

  &:hover {
    background: darken($theme-blue, 5);
  }

  &:active {
    background: darken($theme-blue, 10);
  }
}

.secondary {
  color: $theme-blue;
  background: $theme-blue-transparent;
  &:hover {
    background:  darken($theme-blue-transparent, 5);
  }

  &:active {
    background:  darken($theme-blue-transparent, 10);
  }
}

.warning {
  color: $theme-orange;
  background: $theme-orange-transparent;
  &:hover {
    background:  darken($theme-orange-transparent, 5);
  }

  &:active {
    background:  darken($theme-orange-transparent, 10);
  }
}

.error {
  color: $theme-red;
  background: $theme-red-transparent;
  &:hover {
    background:  darken($theme-red-transparent, 5);
  }

  &:active {
    background:  darken($theme-red-transparent, 10);
  }
}

.disabled {
  background: #daeafa;
  color: white;
  cursor: not-allowed;
  &:hover {
    background: #daeafa;
  }

  &:active {
    background: #daeafa;
  }
}
</style>