Button

<.button>Button</.button>

<.button variant="solid">Solid</.button>
<.button variant="outline">Outline</.button>
<.button variant="surface">Surface</.button>
<.button variant="dashed">Dashed</.button>
<.button variant="soft">Soft</.button>
<.button variant="ghost">Ghost</.button>

<!-- Primary -->
<.button variant="solid" color="primary">Primary Solid</.button>
<.button variant="surface" color="primary">Primary Surface</.button>
<.button variant="outline" color="primary">Primary Outline</.button>

<!-- Info -->
<.button variant="solid" color="info">Info Solid</.button>
<.button variant="surface" color="info">Info Surface</.button>
<.button variant="outline" color="info">Info Outline</.button>

<!-- Success -->
<.button variant="solid" color="success">Success Solid</.button>
<.button variant="surface" color="success">Success Surface</.button>
<.button variant="outline" color="success">Success Outline</.button>

<!-- Warning -->
<.button variant="solid" color="warning">Warning Solid</.button>
<.button variant="surface" color="warning">Warning Surface</.button>
<.button variant="outline" color="warning">Warning Outline</.button>

<!-- Danger -->
<.button variant="solid" color="danger">Danger Solid</.button>
<.button variant="surface" color="danger">Danger Surface</.button>
<.button variant="outline" color="danger">Danger Outline</.button>

<.button size="xs">Extra Small</.button>
<.button size="sm">Small</.button>
<.button size="md">Medium</.button>
<.button size="lg">Large</.button>
<.button size="xl">Extra Large</.button>

<.button size="icon-xs">
  <.icon name="hero-star" class="icon" />
</.button>
<.button size="icon-sm">
  <.icon name="hero-star" class="icon" />
</.button>
<.button size="icon-md">
  <.icon name="hero-star" class="icon" />
</.button>
<.button size="icon-lg">
  <.icon name="hero-star" class="icon" />
</.button>
<.button size="icon-xl">
  <.icon name="hero-star" class="icon" />
</.button>

<.button variant="solid" color="primary">
  <.icon name="hero-arrow-down-tray" class="icon" /> Download
</.button>

<.button variant="solid" color="danger">
  <.icon name="hero-trash" class="icon" /> Delete
</.button>

<.button variant="outline">
  Settings <.icon name="hero-cog-6-tooth" class="icon" />
</.button>

<.button variant="dashed">
  <.icon name="hero-funnel" class="icon" /> Filters
</.button>

<.button disabled>Disabled</.button>
<.button disabled variant="solid">Disabled</.button>
<.button class="w-24" variant="solid" disabled>
  <.loading class="icon text-white" />
</.button>
<.button disabled variant="ghost">Disabled</.button>

<.button disabled>Disabled Default</.button>

<.button variant="solid" color="primary" disabled class="w-24">
  <.loading class="icon text-white" />
</.button>

<.button variant="soft" color="primary" disabled>
  <.loading class="icon" /> Loading...
</.button>

<.button navigate="/dashboard" variant="solid" color="primary">
  Go to Dashboard
</.button>

<.button href="https://example.com" target="_blank" variant="soft">
  External Link
</.button>

<.button patch="/users?sort=name" variant="ghost">
  Sort by Name
</.button>

<.button class="rounded-full" variant="solid" color="primary">
  Pill Button
</.button>

<.button class="bg-pink-500 hover:bg-pink-600" variant="solid" color="success">
  Custom Color
</.button>

<.button class="w-full" variant="outline">
  Full Width Button
</.button>