Button

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

<template>
  <Inline>
    <Button>Save</Button>
    <Button variant="outline" tone="neutral">Cancel</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>
      New
    </Button>
    <Button variant="outline" tone="neutral">
      Next
      <template #trailing>
        <ArrowRight />
      </template>
    </Button>
    <IconButton label="Settings" 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">
      <Bookmark />
    </IconButton>
    <IconButton label="Share" variant="outline">
      <Share2 />
    </IconButton>
    <IconButton label="Confirm" variant="solid" tone="accent">
      <Check />
    </IconButton>
    <IconButton label="Delete" 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="Alignment">
      <IconButton label="Align left" variant="outline" tone="neutral">
        <AlignLeft />
      </IconButton>
      <IconButton label="Align center" variant="outline" tone="neutral">
        <AlignCenter />
      </IconButton>
      <IconButton label="Align right" variant="outline" tone="neutral">
        <AlignRight />
      </IconButton>
    </ButtonGroup>

    <ButtonGroup label="View" divider>
      <Button variant="soft" tone="neutral">List</Button>
      <Button variant="soft" tone="neutral">Grid</Button>
      <Button variant="soft" tone="neutral">Timeline</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>Save</Button>
    <Button loading variant="soft">
      <template #icon>
        <Save />
      </template>
      Save
    </Button>
    <Button loading variant="outline" tone="neutral">
      Next
      <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 ? 'Uploading…' : 'Upload file' }}
  </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: 'Sign in with Google' },
    { svg: githubSvg, label: 'Sign in with GitHub' },
    { svg: appleSvg, label: 'Sign in with 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"
    >
      Visit Hikarinagi
      <template #trailing>
        <ArrowUpRight />
      </template>
    </Button>
    <Button
      as="a"
      href="https://www.hikarinagi.com"
      target="_blank"
      rel="noreferrer"
      variant="link"
    >
      Learn more
    </Button>
  </Inline>
</template>

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

<template>
  <Inline>
    <Button class="rounded-none px-8">Square</Button>
    <Button variant="outline" tone="neutral" class="border-dashed">Dashed</Button>
    <Button class="bg-purple-600 text-white hover:bg-purple-700">Purple</Button>
  </Inline>
</template>