Button

<div class="flex flex-col items-start gap-8 sm:flex-row">
  <div class="flex items-start gap-2">
    <c-button size="sm" variant="outline">Small</c-button>
    <c-button size="icon-sm" variant="outline" aria-label="Submit">→</c-button>
  </div>
  <div class="flex items-start gap-2">
    <c-button variant="outline">Default</c-button>
    <c-button size="icon" variant="outline" aria-label="Submit">→</c-button>
  </div>
  <div class="flex items-start gap-2">
    <c-button variant="outline" size="lg">Large</c-button>
    <c-button size="icon-lg" variant="outline" aria-label="Submit">→</c-button>
  </div>
</div>

<c-button>Button</c-button>

<c-button variant="secondary">Secondary</c-button>

<c-button variant="outline">Outline</c-button>

<c-button variant="ghost">Ghost</c-button>

<c-button variant="destructive">Destructive</c-button>

<c-button variant="link">Link</c-button>

<c-button variant="outline" size="icon" aria-label="Submit">→</c-button>

<c-button variant="outline" size="sm">
  <c-lucide-icon icon="git-branch" size="16"></c-lucide-icon>
  New Branch
</c-button>

<c-button size="sm" variant="outline" disabled>
  <svg
    class="animate-spin"
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
  </svg>
  Submit
</c-button>

<c-button href="/components/button">Go to Components</c-button>