<template>
  <div :class="[
    direction ? `el-button-group-${direction}` : '',
    base ? 'el-button-group-base' : 'el-button-group',
    size ? 'el-button-group-' + size : ''
    ]">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'ElButtonGroup',
    props: {
      direction: {
        type: String,
        default: 'left',
        validate(value) {
          return ['left', 'right'].includes(value)
        }
      },
      size: {
        type: String,
        default() {
          return (this.$ELEMENT || {}).size;
        }
      },
      base: Boolean
    }
  }
</script>
