# Button 按钮

<template>
  <Flex gap="16px" flow="column">
    <Flex>
      <Button>默认状态</Button>
      <Button danger>危险警示</Button>
      <Button loading>加载状态</Button>
      <Button disabled>禁用状态</Button>
    </Flex>

    <Flex>
      <Button type="primary">默认状态</Button>
      <Button type="primary" danger>危险警示</Button>
      <Button type="primary" loading>加载状态</Button>
      <Button type="primary" disabled>禁用状态</Button>
    </Flex>

    <Flex>
      <Button type="text">默认样式</Button>
      <Button type="text" danger>危险警示</Button>
      <Button type="text" loading>加载状态</Button>
      <Button type="text" disabled>禁用状态</Button>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent } from 'vue'
import { Flex, Button } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Button
  }
})
</script>

<template>
  <Flex gap="16px" flow="column">
    <Flex>
      <Button>
        <Flex gap="4px">
          <Icon><EmojiSmileFill /></Icon>Smile
        </Flex>
      </Button>

      <Button>
        <Flex gap="4px">
          <Icon><Gem /></Icon>Gem<Icon><Gem /></Icon>
        </Flex>
      </Button>

      <Button>
        <Flex gap="4px">
          Heart<Icon><HeartFill /></Icon>
        </Flex>
      </Button>
    </Flex>

    <Flex>
      <Button type="primary">
        <Flex gap="4px">
          <Icon><EmojiSmileFill /></Icon>Smile
        </Flex>
      </Button>

      <Button type="primary">
        <Flex gap="4px">
          <Icon><Gem /></Icon>Gem<Icon><Gem /></Icon>
        </Flex>
      </Button>

      <Button type="primary">
        <Flex gap="4px">
          Heart<Icon><HeartFill /></Icon>
        </Flex>
      </Button>
    </Flex>

    <Flex>
      <Button type="text">
        <Flex gap="4px">
          <Icon><EmojiSmileFill /></Icon>Smile
        </Flex>
      </Button>

      <Button type="text">
        <Flex gap="4px">
          <Icon><Gem /></Icon>Gem<Icon><Gem /></Icon>
        </Flex>
      </Button>

      <Button type="text">
        <Flex gap="4px">
          Heart<Icon><HeartFill /></Icon>
        </Flex>
      </Button>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent } from 'vue'
import { Flex, Button, Icon } from 'comz'
import { EmojiSmileFill, Gem, HeartFill } from '@comz/icons'

export default defineComponent({
  components: {
    Flex,
    Button,
    Icon,
    EmojiSmileFill,
    Gem,
    HeartFill
  }
})
</script>