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>