Vue Dynamic Button Component example

Button.vue

<template>
  <button
    :disabled="disabled"
    :type="type"
    class="btn"
    :class="[
      variant ? `btn-${variant}` : '',
      disabled ? disabled : ''
    ]"
    @click="!disabled ? $emit('clicked') : ''"
  >
  // Use slot to add text to it like a normal button
    <slot />
  </button>
</template>

<script>
export default {
  props: {
    variant: {
      type: String,
      validator: s => ['outline', 'success', 'warning', 'danger'].includes(s)
    },
    type: {
      type: String,
      validator: s => ['submit', 'reset'].includes(s)
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
// limited styles here for brevity

.btn {
  line-height: 25px;
  padding: 5px 20px;
}

.disabled {
  border: 2px solid var(--grey-ultralight) !important;
  cursor: default !important;
  background: var(--grey-ultralight) !important;
  color: var(--grey-light) !important;
}

.btn-outline {
  border: 2px solid var(--blue);
  background: var(--bg);
  color: var(--blue);
  &:hover {
    background: var(--blue);
    color: var(--white);
    border: 2px solid var(--blue);
  }
}

.btn-success {
  // Success styles here
}

.btn-warning {
  // Warning styles here
}

.btn-danger {
  // Danger styles here
}

</style>