<template>
  <ElevatedButton v-bind="$props" v-if="kind == 'elevated'">
    <slot></slot>
  </ElevatedButton>
  <FlatButton v-bind="$props" v-else-if="kind == 'flat'">
    <slot></slot>
  </FlatButton>
  <RoundButton v-bind="$props" v-else-if="kind == 'round'">
    <slot></slot>
  </RoundButton>
  <LinkButton v-bind="$props" v-else>
    <slot></slot>
  </LinkButton>
</template>
<script>
import FlatButton from "./components/FlatButton.vue";
import ElevatedButton from "./components/ElevatedButton.vue";
import RoundButton from "./components/RoundButton.vue";
import LinkButton from "./components/LinkButton.vue";

import { ButtonProps } from "./types";

export default {
  name: "rovi-button",
  props: ButtonProps,
  data() {
    return {};
  },
  components: { FlatButton, ElevatedButton, RoundButton, LinkButton },
};
</script>
<style lang=""></style>
