Button

<template>
  <div class="demo-row">
    <UiButton>Primary</UiButton>
    <UiButton variant="secondary">Secondary</UiButton>
    <UiButton variant="solid">Solid</UiButton>
    <UiButton variant="ghost">Ghost</UiButton>
    <UiButton variant="danger">Danger</UiButton>
    <UiButton variant="link">Link</UiButton>
  </div>
</template>

<template>
  <div class="demo-row">
    <UiButton size="small" variant="secondary">Small</UiButton>
    <UiButton variant="secondary">Medium</UiButton>
    <UiButton size="large" variant="secondary">
      Large
      <template #trailing><Icon name="arrow-right" :size="14" /></template>
    </UiButton>
  </div>
</template>

<script setup lang="ts">
const saving = ref(false);

async function save() {
  saving.value = true;
  await new Promise((resolve) => setTimeout(resolve, 1500));
  saving.value = false;
}
</script>

<template>
  <UiButton :loading="saving" @click="save">
    <template #spinner><span class="spinner" /></template>
    {{ saving ? "Saving…" : "Save changes" }}
  </UiButton>
</template>

<template>
  <div class="demo-row">
    <UiButton to="/installation" variant="secondary">Router link</UiButton>
    <UiButton href="https://github.com/humanonlyweb/ui" target="_blank" variant="ghost">
      External link
    </UiButton>
    <UiButton href="/" variant="ghost" disabled>Disabled link</UiButton>
  </div>
</template>