Home

Button
Chip Button
Icon Button
Input
Popover
Select

Primary

<script setup lang="ts">
  import { IconButton } from '@pikaso/core'
  import { ChevronLeft } from 'lucide-vue-next'
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <IconButton
      variant="primary"
      size="sm"
    >
      <ChevronLeft class="size-4" />
    </IconButton>

    <IconButton
      variant="primary"
      size="md"
    >
      <ChevronLeft class="size-5" />
    </IconButton>

    <IconButton
      variant="primary"
      size="lg"
    >
      <ChevronLeft class="size-6" />
    </IconButton>
  </div>
</template>

Transparent

<script setup lang="ts">
  import { IconButton } from '@pikaso/core'
  import { ChevronLeft } from 'lucide-vue-next'
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <IconButton
      variant="ghost"
      size="sm"
    >
      <ChevronLeft class="size-4" />
    </IconButton>

    <IconButton
      variant="ghost"
      size="md"
    >
      <ChevronLeft class="size-5" />
    </IconButton>

    <IconButton
      variant="ghost"
      size="lg"
    >
      <ChevronLeft class="size-6" />
    </IconButton>
  </div>
</template>

Quaternary

<script setup lang="ts">
  import { IconButton } from '@pikaso/core'
  import { ChevronLeft } from 'lucide-vue-next'
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <IconButton size="sm">
      <ChevronLeft class="size-4" />
    </IconButton>

    <IconButton size="md">
      <ChevronLeft class="size-5" />
    </IconButton>

    <IconButton size="lg">
      <ChevronLeft class="size-6" />
    </IconButton>
  </div>
</template>

Uso con elementos personalizados

El componente IconButton puede ser utilizado con cualquier elemento HTML. 

<script setup lang="ts">
  import { IconButton } from '@pikaso/core'
  import { ExternalLink } from 'lucide-vue-next'
</script>

<template>
  <IconButton
    variant="primary"
    as-child
  >
    <a href="https://www.freepik.com">
      <ExternalLink class="size-5" />
    </a>
  </IconButton>
</template>