<.button class="">
    <p>Click Me</p>
</.button>

<.button class="" color="orange">
    <:icon>
      <.icon name="hero-magnifying-glass" />
    </:icon>
    <p>Search now</p>
</.button>

<.button disabled class="" color="teal">
    <p>Add entry</p>
</.button>

<.button loading class="" color="indigo">
    <p>Create account</p>
</.button>

<.button loading class="" color="gray" loading_text="Please wait">
    <p>Create account</p>
</.button>

<.grid class="gap-x-2 gap-y-2 py-4">
    <.button size="xs" class="max-w-fit">
        <p>Click Me</p>
    </.button>
    <.button size="sm" class="max-w-fit">
        <p>Click Me</p>
    </.button>
    <.button size="md" class="max-w-fit">
        <p>Click Me</p>
    </.button>
    <.button size="lg" class="max-w-fit">
        <p>Click Me</p>
    </.button>
    <.button size="xl" class="max-w-fit">
        <p>Click Me</p>
    </.button>
  </.grid>

<.grid num_items="3" class="gap-x-2 gap-y-2 py-4">
    <.button size="md" class="max-w-fit" color="slate">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="gray">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="zinc">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="neutral">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="stone">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="red">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="orange">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="amber">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="yellow">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="lime">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="green">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="emerald">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="teal">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="cyan">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="sky">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="blue">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="indigo">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="violet">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="purple">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="fuchsia">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="pink">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
    <.button size="md" class="max-w-fit" color="rose">
      <:icon>
        <.icon name="hero-magnifying-glass" />
      </:icon>
      <p>Search now</p>
    </.button>
  </.grid>