Home

Button
Chip Button
Icon Button
Input
Popover
Select

Primary

<script setup lang="ts">
  import { ChipButton } from '@pikaso/core'
</script>

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

    <ChipButton
      variant="primary"
      size="sm"
      aria-selected="true"
    >
      Selected
    </ChipButton>

    <ChipButton
      variant="primary"
      size="sm"
      disabled
    >
      Disabled
    </ChipButton>
  </div>
</template>

Outline

<script setup lang="ts">
  import { ChipButton } from '@pikaso/core'
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <ChipButton
      variant="outline"
      size="sm"
    >
      ChipButton
    </ChipButton>

    <ChipButton
      variant="outline"
      size="sm"
      aria-selected="true"
    >
      Selected
    </ChipButton>

    <ChipButton
      variant="outline"
      size="sm"
      disabled
    >
      Disabled
    </ChipButton>
  </div>
</template>

Sizes

<script setup lang="ts">
  import { ChipButton } from '@pikaso/core'
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <ChipButton
      variant="primary"
      size="xs"
    >
      Extra Small
    </ChipButton>

    <ChipButton
      variant="primary"
      size="sm"
    >
      Small (default)
    </ChipButton>

    <ChipButton
      variant="primary"
      size="md"
    >
      Medium
    </ChipButton>
  </div>
</template>

Using with custom elements

The ChipButton component can be used with any HTML element.

<script setup lang="ts">
  import { ChipButton } from '@pikaso/core'
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <ChipButton
      variant="primary"
      as-child
    >
      <a href="https://www.freepik.com">Freepik</a>
    </ChipButton>

    <ChipButton
      variant="outline"
      as-child
    >
      <a href="#custom-element">Custom element</a>
    </ChipButton>
  </div>
</template>