Button

<!-- xs -->
<button x-data="button({ size: 'xs' })" x-bind="buttonAttrs">xs</button>

<!-- sm -->
<button x-data="button({ size: 'sm' })" x-bind="buttonAttrs">sm</button>

<!-- default -->
<button x-data="button()" x-bind="buttonAttrs">default</button>

<!-- lg -->
<button x-data="button({ size: 'lg' })" x-bind="buttonAttrs">lg</button>

<button x-data="button()" x-bind="buttonAttrs">Button</button>

<button x-data="button({ variant: 'secondary' })" x-bind="buttonAttrs">Secondary</button>

<button x-data="button({ variant: 'destructive' })" x-bind="buttonAttrs">Destructive</button>

<button x-data="button({ variant: 'outline' })" x-bind="buttonAttrs">Outline</button>

<button x-data="button({ variant: 'ghost' })" x-bind="buttonAttrs">Ghost</button>

<button x-data="button({ variant: 'link' })" x-bind="buttonAttrs">Link</button>

<!-- icon-sm -->
<button x-data="button({ size: 'icon-sm' })" x-bind="buttonAttrs">
  <svg ...></svg>
</button>

<!-- icon (default) -->
<button x-data="button({ size: 'icon' })" x-bind="buttonAttrs">
  <svg ...></svg>
</button>

<!-- icon-lg -->
<button x-data="button({ size: 'icon-lg' })" x-bind="buttonAttrs">
  <svg ...></svg>
</button>

<!-- Icon at start -->
<button x-data="button()" x-bind="buttonAttrs">
  <svg class="mr-2" ...></svg>
  Upload
</button>

<!-- Icon at end -->
<button x-data="button()" x-bind="buttonAttrs">
  Next
  <svg class="ml-2" ...></svg>
</button>

<button x-data="button({ class: 'rounded-full' })" x-bind="buttonAttrs">Get Started</button>

<button x-data="button()" x-bind="buttonAttrs" :disabled="loading">
  <svg x-show="loading" class="mr-2 size-4 animate-spin" ...></svg>
  <span x-text="loading ? 'Loading...' : 'Click me'"></span>
</button>

<!-- Add the disabled attribute -->
<button x-data="button()" x-bind="buttonAttrs" disabled>Primary</button>

<!-- Add rounded: true for pill shape -->
<button x-data="button({ rounded: true })" x-bind="buttonAttrs">Rounded</button>
<button x-data="button({ variant: 'outline', rounded: true })" x-bind="buttonAttrs">Outline</button>
<button x-data="button({ size: 'icon', variant: 'outline', rounded: true })" x-bind="buttonAttrs">
  <svg ...></svg>
</button>