<template>
  <el-button :size="size" class="fp-btn is-plain" type="info" plain :disabled="disabled" @click="$emit('click')" >
    <slot></slot>
<!--    <template #default>{{ $slots.default[0].text }}</template>-->
  </el-button>
</template>

<script>
export default {
  name: "FpButton",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    }
  }
}
</script>

<style scoped>
.fp-btn, .fp-btn.is-plain {
  border: none;
  /*background-color: #fff;*/
  background-color: #f6f7f9;
  cursor: pointer;
  color: #444950;
  /*font-weight: 700;*/
  padding: 12px 14px;
}

.fp-btn.is-plain:active, .fp-btn.is-plain:hover, .fp-btn.is-plain:focus {
  color: #444950;
  /*background-color: #f1f2f4;*/
  background-color: #e8eaec;
  border-color: #f1f2f4;
}

.el-button--info.is-plain.is-disabled, .el-button--info.is-plain.is-disabled:active, .el-button--info.is-plain.is-disabled:focus, .el-button--info.is-plain.is-disabled:hover {
  background-color: #fff;
  /*background-color: #f6f7f9;*/
}

.el-button+.el-button {
    margin-left: 0px;
}
</style>