<template>
  <div class="demo-button-size">
    <ui-radio-group
      v-model="size"
      :options="options"
      type="button"></ui-radio-group>
    <br />
    <ui-button
      type="primary"
      :size="size">
      Primary
    </ui-button>
    <ui-button :size="size">
      Default
    </ui-button>
    <ui-button
      type="danger"
      :size="size">
      Danger
    </ui-button>
    <br />
    <ui-button
      icon="search"
      :size="size"
      type="primary"
      circle></ui-button>
    <ui-button
      icon="search"
      :size="size">
      Search
    </ui-button>
    <ui-button-group :size="size">
      <ui-button
        icon="chevronleft"
        :size="size">
        Backward
      </ui-button>
      <ui-button
        icon="chevronright"
        icon-type="right"
        :size="size"
        href="http://www.xiaoman.cn"
        target="__blank">
        Forward
      </ui-button>
    </ui-button-group>

    <ui-button-group :size="size">
      <ui-button
        type="text"
        icon="chevronleft"
        :size="size">
        Backward
      </ui-button>
      <ui-button
        type="text"
        icon="chevronright"
        icon-type="right"
        :size="size">
        Forward
      </ui-button>
    </ui-button-group>
  </div>
</template>
<script>
import { RadioGroup, Button, ButtonGroup } from "amumu-ui"
export default {
  components: {
    "ui-radio-group": RadioGroup,
    "ui-button": Button,
    "ui-button-group": ButtonGroup,
  },
  data() {
    return {
      size: "large",
      options: [
        {
          label: "Large",
          value: "large",
        },
        {
          label: "Default",
          value: "default",
        },
        {
          label: "Medium",
          value: "medium",
        },
        {
          label: "Small",
          value: "small",
        },
      ],
    }
  },
}
</script>
<style lang="scss">
.demo-button-size {
  .mm-button {
    margin: 0 10px 10px 0;
  }
}
</style>
