Button

<template>
  <PStack align="center">
    <PButton size="sm">Small</PButton>
    <PButton size="md">Medium</PButton>
    <PButton size="lg">Large</PButton>
  </PStack>
</template>

<template>
  <PStack>
    <PButton shape="default"> click me </PButton>
    <PButton shape="rounded"> click me </PButton>
    <PButton shape="square"> click me </PButton>
  </PStack>
</template>

<template>
  <PStack>
    <PButton variant="default">default</PButton>
    <PButton variant="primary">primary</PButton>
    <PButton variant="success">success</PButton>
    <PButton variant="warning">warning</PButton>
    <PButton variant="error">error</PButton>
    <PButton variant="ghost">ghost</PButton>
  </PStack>
</template>

<template>
  <PStack>
    <PButton disabled>disabled</PButton>
    <PButton loading>loading</PButton>

    <PButton variant="primary" disabled>disabled</PButton>
    <PButton variant="ghost" loading>loading</PButton>
  </PStack>
</template>

<script setup>
import HeartIcon from '@gdsicon/vue/heart-fill'
</script>

<template>
  <PStack>
    <PButton icon><HeartIcon /></PButton>
    <PButton icon variant="primary"><HeartIcon /></PButton>
    <PButton icon variant="success"><HeartIcon /></PButton>
    <PButton icon variant="error"><HeartIcon /></PButton>
    <PButton icon variant="ghost"><HeartIcon /></PButton>
  </PStack>
</template>

<template>
  <PButton full-width>Block Button </PButton>
</template>

<script setup>
import ChevronDownIcon from '@gdsicon/vue/chevron-down'
</script>

<template>
  <PStack direction="vertical">
    <PButtonGroup>
      <PButton>Previous Page</PButton>
      <PButton>Next Page</PButton>
    </PButtonGroup>

    <PButtonGroup variant="primary">
      <PButton>Previous Page</PButton>
      <PButton>Next Page</PButton>
    </PButtonGroup>

    <PButtonGroup size="sm" disabled align="left" class="w-md">
      <PButton full-width>Previous Page</PButton>
      <PButton full-width>Next Page</PButton>
    </PButtonGroup>
  </PStack>
</template>