Button

Basic Info

A Vue wrapper around a basic html button. Useful for easy styling of html buttons.

Props

Prop Type Description
borderColor String Color of the border. Accepts any standard CSS format (hex, rgba)
backgroundColor String Color of the background. Accepts any standard CSS format (hex, rgba)
textColor String Color of the text. Accepts any standard CSS format (hex, rgba)

Example

<Button borderColor="#46bd87" backgroundColor="#46bd87" textColor="#fff">Click Me</Button>

Source

<template>
  <button class="button" v-bind:style="{ borderColor: borderColor, backgroundColor: backgroundColor, color: textColor }">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  components: {
  },
  props: {
    borderColor: String,
    backgroundColor: String,
    textColor: String,
  }
}
</script>

<style lang="scss" scoped>

button {
  display: block;
  background-color: white;
  padding: 0.4rem;
  font-family: inherit !important;
  border: 0px;
  border-radius: 0.25rem;
  cursor: pointer;
}

</style>