<.button label="Button" to="/" />
<.button link_type="a" to="/" label="Link" />
<.button link_type="a" to="/" label="Link with method" method={:delete} />
<.button link_type="live_patch" to="/" label="Live Patch" />
<.button link_type="live_redirect" to="/" label="Live Redirect" />

        

          <.button color="primary" label="Primary" />
<.button color="secondary" label="Secondary" />
<.button color="white" label="White" />
<.button color="pure_white" label="Pure White" />
<.button color="info" label="Info" />
<.button color="success" label="Success" />
<.button color="warning" label="Warning" />
<.button color="danger" label="Danger" />
<.button color="gray" label="Gray" />
<.button color="light" label="Light" />
<.button color="Dark" label="Dark" />

# Light is unique in that it is designed to adapt subtly to dark mode

        

          <.button color="primary" label="Primary" variant="outline" />
<.button color="secondary" label="Secondary" variant="outline" />
<.button color="white" label="White" variant="outline" />
<.button color="info" label="Info" variant="outline" />
<.button color="success" label="Success" variant="outline" />
<.button color="warning" label="Warning" variant="outline" />
<.button color="danger" label="Danger" variant="outline" />
<.button color="gray" label="Gray" variant="outline" />
<.button color="light" label="Light" variant="outline" />
<.button color="dark" label="Dark" variant="outline" />

        

          <.button color="primary" label="Primary" variant="inverted" />
<.button color="secondary" label="Secondary" variant="inverted" />
<.button color="white" label="White" variant="inverted" />
<.button color="info" label="Info" variant="inverted" />
<.button color="success" label="Success" variant="inverted" />
<.button color="warning" label="Warning" variant="inverted" />
<.button color="danger" label="Danger" variant="inverted" />
<.button color="gray" label="Gray" variant="inverted" />
<.button color="light" label="Light" variant="inverted" />
<.button color="dark" label="Dark" variant="inverted" />

        

          <.button color="primary" label="Primary" variant="shadow" />
<.button color="secondary" label="Secondary" variant="shadow" />
<.button color="white" label="White" variant="shadow" />
<.button color="info" label="Info" variant="shadow" />
<.button color="success" label="Success" variant="shadow" />
<.button color="warning" label="Warning" variant="shadow" />
<.button color="danger" label="Danger" variant="shadow" />
<.button color="gray" label="Gray" variant="shadow" />
<.button color="light" label="Light" variant="shadow" />
<.button color="dark" label="Dark" variant="shadow" />

        

              <.button color="primary" label="Primary" variant="ghost" />
    <.button color="secondary" label="Secondary" variant="ghost" />
    <.button color="info" label="Info" variant="ghost" />
    <.button color="success" label="Success" variant="ghost" />
    <.button color="warning" label="Warning" variant="ghost" />
    <.button color="danger" label="Danger" variant="ghost" />
    <.button color="gray" label="Gray" variant="ghost" />

        

          <.button radius="none" label="None" />
<.button radius="sm" label="sm" />
<.button radius="md" label="md" />
<.button radius="lg" label="lg" />
<.button radius="xl" label="xl" />
<.button radius="full" label="full" />

        

          <.button size="xs" label="xs" />
<.button size="sm" label="sm" />
<.button size="md" label="md" />
<.button size="lg" label="lg" />
<.button size="xl" label="xl" />

        

          <.button disabled size="xs" to="/" label="Disabled xs" />
<.button disabled size="sm" to="/" label="Disabled sm" />
<.button disabled size="md" to="/" label="Disabled md" />
<.button disabled size="lg" to="/" label="Disabled lg" />
<.button disabled size="xl" to="/" label="Disabled xl" />

        

          <.button loading size="xs" label="Loading xs" />
<.button loading size="sm" label="Loading sm" />
<.button loading size="md" label="Loading md" />
<.button loading size="lg" label="Loading lg" />
<.button loading size="xl" label="Loading xl" />

        

          <.button icon="hero-home-mini" label="Mini" />
<.button with_icon link_type="a" to="/">
  <.icon name="hero-home-solid" class="w-5 h-5" /> Solid
</.button>
<.button with_icon link_type="a" to="/">
  <.icon name="hero-home" class="w-5 h-5" /> Outline
</.button>

        

          <.icon_button tooltip="Clock" size="xs">
    <.icon name="hero-clock-solid" class="w-5 h-5" />
  </.icon_button>
  <.icon_button tooltip="Clock" size="sm" color="secondary">
    <.icon name="hero-clock-solid" />
  </.icon_button>
  <.icon_button size="md" color="success">
    <.icon name="hero-trash-solid" />
  </.icon_button>
  <.icon_button
    size="md"
    color="warning"
    tooltip="Take me to google!"
    target="_blank"
    link_type="a"
    to="https://google.com"
  >
    <.icon name="hero-arrow-up-circle-solid" class="w-7 h-7 " />
  </.icon_button>
  <.icon_button disabled class="!text-green-600">
    <.icon name="hero-arrow-down-on-square-solid" />
  </.icon_button>

  <.icon_button to="/" loading link_type="button" class="!text-indigo-600 !dark:text-indigo-300">
    <.icon name="hero-trash-solid" />
  </.icon_button>

        

           attr :size, :string, default: "md", values: ["xs", "sm", "md", "lg", "xl"], doc: "button sizes"

attr :radius, :string,
  default: "md",
  values: ["none", "sm", "md", "lg", "xl", "full"],
  doc: "button border radius"

attr :variant, :string,
  default: "solid",
  values: ["solid", "light", "outline", "inverted", "shadow", "ghost"],
  doc: "button variant"

attr :color, :string,
  default: "primary",
  values: [
    "primary",
    "secondary",
    "info",
    "success",
    "warning",
    "danger",
    "gray",
    "pure_white",
    "white",
    "light",
    "dark"
  ],
  doc: "button color"

attr :to, :string, default: nil, doc: "link path"
attr :loading, :boolean, default: false, doc: "indicates a loading state"
attr :disabled, :boolean, default: false, doc: "indicates a disabled state"
attr :icon, :any, default: nil, doc: "name of a Heroicon at the front of the button"
attr :with_icon, :boolean, default: false, doc: "adds some icon base classes"

attr :link_type, :string,
  default: "button",
  values: ["a", "live_patch", "live_redirect", "button"]

attr :class, :any, default: nil, doc: "CSS class"
attr :label, :string, default: nil, doc: "labels your button"

attr :rest, :global,
  include: ~w(method download hreflang ping referrerpolicy rel target type value name form)

slot :inner_block, required: false