Button #

<template>
  <div style="display: flex; gap: 5px">
    <v-button type="primary">Primary</v-button>
    <v-button type="secondary">secondary</v-button>
    <v-button type="tertiary">tertiary</v-button>
  </div>
</template>

<template>
  <div style="display: flex; gap: 5px">
    <v-button size="mini">Mini</v-button>
    <v-button size="compact">Compact</v-button>
    <v-button size="default">Default</v-button>
    <v-button size="large">Large</v-button>
  </div>
</template>

<template>
  <div style="display: flex; gap: 5px">
    <v-button shape="default">Default</v-button>
    <v-button shape="pill">Pill</v-button>
    <v-button shape="round">Round</v-button>
    <v-button shape="circle">Circle</v-button>
    <v-button shape="square">Square</v-button>
  </div>
</template>

<template>
  <v-button disabled>Disabled</v-button>
</template>

<template>
  <v-button loading>loading</v-button>
</template>

<template>
  <v-button @click="greeting">Click me</v-button>
</template>

<script setup>
const greeting = () => alert('Hello');
</script>