Button 按钮

<script setup lang="ts">
  import { Button, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Button>保存</Button>
    <Button variant="outline" tone="neutral">取消</Button>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Inline, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack>
    <Inline>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </Inline>
    <Inline data-density="compact">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </Inline>
  </Stack>
</template>

<script setup lang="ts">
  import { ArrowRight, Plus, Settings } from '@lucide/vue'
  import { Button, IconButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Button>
      <template #icon>
        <Plus />
      </template>
      新建
    </Button>
    <Button variant="outline" tone="neutral">
      下一步
      <template #trailing>
        <ArrowRight />
      </template>
    </Button>
    <IconButton label="设置" variant="outline">
      <Settings />
    </IconButton>
  </Inline>
</template>

<script setup lang="ts">
  import { Bookmark, Check, Share2, Trash2 } from '@lucide/vue'
  import { IconButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <IconButton label="收藏">
      <Bookmark />
    </IconButton>
    <IconButton label="分享" variant="outline">
      <Share2 />
    </IconButton>
    <IconButton label="确认" variant="solid" tone="accent">
      <Check />
    </IconButton>
    <IconButton label="删除" variant="soft" tone="danger">
      <Trash2 />
    </IconButton>
  </Inline>
</template>

<script setup lang="ts">
  import { AlignCenter, AlignLeft, AlignRight } from '@lucide/vue'
  import { Button, ButtonGroup, IconButton, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack align="center">
    <ButtonGroup label="对齐方式">
      <IconButton label="左对齐" variant="outline" tone="neutral">
        <AlignLeft />
      </IconButton>
      <IconButton label="居中" variant="outline" tone="neutral">
        <AlignCenter />
      </IconButton>
      <IconButton label="右对齐" variant="outline" tone="neutral">
        <AlignRight />
      </IconButton>
    </ButtonGroup>

    <ButtonGroup label="视图" divider>
      <Button variant="soft" tone="neutral">列表</Button>
      <Button variant="soft" tone="neutral">网格</Button>
      <Button variant="soft" tone="neutral">时间线</Button>
    </ButtonGroup>
  </Stack>
</template>

<script setup lang="ts">
  import { ArrowRight, Save } from '@lucide/vue'
  import { Button, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Button loading>保存</Button>
    <Button loading variant="soft">
      <template #icon>
        <Save />
      </template>
      保存
    </Button>
    <Button loading variant="outline" tone="neutral">
      下一步
      <template #trailing>
        <ArrowRight />
      </template>
    </Button>
  </Inline>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Upload } from '@lucide/vue'
  import { Button } from '@hina-ui/vue'

  const uploading = ref(false)

  function upload() {
    uploading.value = true
    setTimeout(() => (uploading.value = false), 2000)
  }
</script>

<template>
  <Button :loading="uploading" @click="upload">
    <template #icon>
      <Upload />
    </template>
    {{ uploading ? '上传中…' : '上传文件' }}
  </Button>
</template>

<script setup lang="ts">
  import appleSvg from '@lobehub/icons-static-svg/icons/apple.svg?raw'
  import githubSvg from '@lobehub/icons-static-svg/icons/github.svg?raw'
  import googleSvg from '@lobehub/icons-static-svg/icons/google-color.svg?raw'
  import { Button, Stack } from '@hina-ui/vue'
  import RawIcon from '~/components/docs/RawIcon'

  const providers = [
    { svg: googleSvg, label: '使用 Google 登录' },
    { svg: githubSvg, label: '使用 GitHub 登录' },
    { svg: appleSvg, label: '使用 Apple 登录' },
  ]
</script>

<template>
  <Stack gap="sm" class="w-full max-w-xs">
    <Button
      v-for="provider in providers"
      :key="provider.label"
      variant="soft"
      tone="neutral"
      block
      pill
    >
      <template #icon>
        <RawIcon :svg="provider.svg" />
      </template>
      {{ provider.label }}
    </Button>
  </Stack>
</template>

<script setup lang="ts">
  import { ArrowUpRight } from '@lucide/vue'
  import { Button, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Button
      as="a"
      href="https://www.hikarinagi.com"
      target="_blank"
      rel="noreferrer"
      variant="outline"
    >
      访问 Hikarinagi
      <template #trailing>
        <ArrowUpRight />
      </template>
    </Button>
    <Button
      as="a"
      href="https://www.hikarinagi.com"
      target="_blank"
      rel="noreferrer"
      variant="link"
    >
      了解更多
    </Button>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <Button class="rounded-none px-8">直角</Button>
    <Button variant="outline" tone="neutral" class="border-dashed">虚线边框</Button>
    <Button class="bg-purple-600 text-white hover:bg-purple-700">紫色</Button>
  </Inline>
</template>