Button

<.button>Button</.button>

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

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

<.button variant="solid" color="info">Solid</.button>
<.button variant="solid" color="success">Solid</.button>
<.button variant="solid" color="warning">Solid</.button>
<.button variant="solid" color="danger">Solid</.button>

<div class="flex items-center gap-3 flex-wrap">
  <.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>
</div>

<div class="flex gap-3 items-center">
  <.button size="icon-xs">
    <.icon name="huge-search-01-stroke-rounded" class="icon" />
  </.button>
  <.button size="icon-sm">
    <.icon name="huge-settings-02-stroke-rounded" class="icon" />
  </.button>
  <.button size="icon">
    <.icon name="huge-home-01-stroke-rounded" class="icon" />
  </.button>
  <.button size="icon-lg">
    <.icon name="huge-user-stroke-rounded" class="icon" />
  </.button>
  <.button size="icon-xl">
    <.icon name="huge-notification-03-stroke-rounded" class="icon" />
  </.button>
</div>

<div class="flex items-center gap-3 flex-wrap">
  <.button variant="solid" color="primary">
    <.icon name="huge-download-04-stroke-rounded" class="icon" /> Download
  </.button>

  <.button variant="solid" color="danger">
    <.icon name="huge-delete-02-stroke-rounded" class="icon" /> Delete
  </.button>

  <.button variant="outline">
    Settings <.icon name="huge-settings-02-stroke-rounded" class="icon" />
  </.button>

  <.button variant="dashed">
    <.icon name="huge-filter-stroke-rounded" class="icon" /> Filters
  </.button>
</div>

<.button disabled>Disabled</.button>
<.button disabled variant="solid">Disabled</.button>
<.button disabled variant="surface">Disabled</.button>
<.button disabled variant="soft">Disabled</.button>
<.button disabled variant="outline">Disabled</.button>
<.button disabled variant="dashed">Disabled</.button>
<.button disabled variant="ghost">Disabled</.button>

<div class="flex items-center gap-3">
  <.button variant="solid">
    <.loading class="icon text-white" />
  </.button>

  <.button>
    <.loading class="icon" /> Loading...
  </.button>

  <.button>
    <.loading variant="dots-bounce" class="icon" /> Processing
  </.button>

  <.button
    variant="solid"
    color="info"
    class="overflow-hidden relative"
    phx-click={JS.toggle_attribute({"data-loading", "true"})}
  >
    <span class="w-full block transition-transform duration-300 in-data-loading:translate-y-[calc(100%+1rem)]">
      Click me
    </span>

    <.loading class="text-foreground-info absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 opacity-0 transition-opacity duration-300 in-data-loading:opacity-100" />
  </.button>
</div>

<div class="flex gap-3">
  <.button navigate="/" variant="solid" color="primary">
    Navigate
  </.button>

  <.button patch="/components/button?sort=name" variant="outline">
    Patch
  </.button>

  <.button href="https://fluxonui.com" variant="soft">
    Href
  </.button>
</div>

<.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>