Button 按钮 ​

<template>
  <Button>Default</Button>
  <Button type="primary">
    Primary
  </Button>
  <Button type="info">
    Info
  </Button>
  <Button type="success">
    Success
  </Button>
  <Button type="warning">
    Warning
  </Button>
  <Button type="error">
    Error
  </Button>
</template>

<template>
  <Button>Default</Button>
  <Button disabled>
    Default
  </Button>
  <Button type="primary">
    Primary
  </Button>
  <Button disabled type="primary">
    Primary
  </Button>
</template>

<template>
  <Button simple>
    Default
  </Button>
  <Button simple type="primary">
    Primary
  </Button>
  <Button simple type="info">
    Info
  </Button>
  <Button simple type="success">
    Success
  </Button>
  <Button simple type="warning">
    Warning
  </Button>
  <Button simple type="error">
    Error
  </Button>
  <Button simple type="primary" disabled>
    Disabled
  </Button>
</template>

<template>
  <div style="padding: 20px; background-color: #212a2b">
    <Button ghost>
      Default
    </Button>
    <Button ghost type="primary">
      Primary
    </Button>
    <Button ghost type="info">
      Info
    </Button>
    <Button ghost type="success">
      Success
    </Button>
    <Button ghost type="warning">
      Warning
    </Button>
    <Button ghost type="error">
      Error
    </Button>
    <Button ghost disabled>
      Disabled
    </Button>
  </div>
</template>

<template>
  <Button text>
    Default
  </Button>
  <Button text type="primary">
    Primary
  </Button>
  <Button text type="info">
    Info
  </Button>
  <Button text type="success">
    Success
  </Button>
  <Button text type="warning">
    Warning
  </Button>
  <Button text type="error">
    Error
  </Button>
  <Button text disabled>
    Disabled
  </Button>
</template>

<template>
  <Button dashed>
    Default
  </Button>
  <Button dashed type="primary">
    Primary
  </Button>
  <Button dashed type="info">
    Info
  </Button>
  <Button dashed type="success">
    Success
  </Button>
  <Button dashed type="warning">
    Warning
  </Button>
  <Button dashed type="error">
    Error
  </Button>
  <Button dashed disabled>
    Disabled
  </Button>
</template>

<template>
  <Button badge="12">
    Default
  </Button>
  <Button badge="12" type="primary">
    Primary
  </Button>
  <Button ghost badge="12" type="info">
    Info
  </Button>
  <Button simple badge="12" type="success">
    Success
  </Button>
  <Button text badge="12" type="warning">
    Warning
  </Button>
  <Button dashed badge="12" type="error">
    Error
  </Button>
  <Button badge="12" disabled>
    Disabled
  </Button>
</template>

<template>
  <Button type="primary" size="small">
    小矮子
  </Button>
  <Button type="success">
    精神小伙
  </Button>
  <Button type="warning" size="large">
    高个子
  </Button>
  <Button type="info" style="--vxp-button-height: 50px; --vxp-button-h-padding: 22px">
    自己动手 丰衣足食
  </Button>
</template>

<script setup lang="ts">
import { MagnifyingGlass } from '@vexip-ui/icons'
</script>

<template>
  <Button type="primary" :icon="MagnifyingGlass">
    搜索
  </Button>
  <Button type="primary" :icon="MagnifyingGlass"></Button>
  <Button circle type="primary" :icon="MagnifyingGlass">
    搜索
  </Button>
  <Button circle type="primary" :icon="MagnifyingGlass"></Button>
  <Button circle type="primary">
    <template #icon>
      <Icon><MagnifyingGlass></MagnifyingGlass></Icon>
    </template>
  </Button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { MagnifyingGlass } from '@vexip-ui/icons'

const loading = ref(false)

function load() {
  loading.value = true

  setTimeout(() => {
    loading.value = false
  }, 3000)
}
</script>

<template>
  <Button loading type="primary">
    加载中
  </Button>
  <Button type="primary" :loading="loading" @click="load">
    点一下我
  </Button>
  <Button loading circle type="primary">
    加载中
  </Button>
  <Button loading circle type="primary"></Button>
  <Button circle loading type="primary">
    <template #icon>
      <Icon><MagnifyingGlass></MagnifyingGlass></Icon>
    </template>
  </Button>
</template>

<template>
  <Button color="orange">
    橘里橘气
  </Button>
  <Button ghost color="orange">
    橘里橘气
  </Button>
  <Button simple color="orange">
    橘里橘气
  </Button>
  <Button text color="orange">
    橘里橘气
  </Button>
  <Button dashed color="orange">
    橘里橘气
  </Button>
  <Button color="orange" disabled>
    橘里橘气
  </Button>
</template>

<script setup lang="ts">
import { Minus, Plus } from '@vexip-ui/icons'
</script>

<template>
  <Space vertical>
    <ButtonGroup>
      <Button> 按钮 1 </Button>
      <Button> 按钮 2 </Button>
      <Button> 按钮 3 </Button>
    </ButtonGroup>
    <ButtonGroup size="small">
      <Button :icon="Plus"></Button>
      <Button :icon="Minus"></Button>
    </ButtonGroup>
    <ButtonGroup circle type="primary">
      <Tooltip transfer reverse>
        <template #trigger>
          <Button> 按钮 1 </Button>
        </template>
        按钮 1
      </Tooltip>
      <Tooltip transfer reverse>
        <template #trigger>
          <Button> 按钮 2 </Button>
        </template>
        按钮 2
      </Tooltip>
      <Tooltip transfer reverse>
        <template #trigger>
          <Button type="warning">
            按钮 3
          </Button>
        </template>
        按钮 3
      </Tooltip>
    </ButtonGroup>
  </Space>
</template>