Button

---
import Button from "@technologyadvice/components/ui/button/Button.vue"
---

<Button size="sm" client:load>Small</Button>
<Button size="md" client:load>Medium</Button>
<Button size="lg" client:load>Large</Button>
<Button size="xl" client:load>XLarge</Button>
<Button size="xxl" client:load>XXLarge</Button>

---
import Button from "@technologyadvice/components/ui/button/Button.vue"
---

<Button client:load>Brand</Button>
<Button disabled client:load>Brand</Button>

<br class="mb-4" />

<Button variant="secondaryGray" client:load>Secondary Gray</Button>
<Button variant="secondaryGray" disabled client:load>Secondary Gray</Button>

<br class="mb-4" />

<Button variant="secondaryColor" client:load>Secondary Color</Button>
<Button variant="secondaryColor" disabled client:load>Secondary Color</Button>

<br class="mb-4" />

<Button variant="tertiaryGray" client:load>Tertiary Gray</Button>
<Button variant="tertiaryGray" disabled client:load>Tertiary Gray</Button>

<br class="mb-4" />

<Button variant="tertiaryColor" client:load>Tertiary Color</Button>
<Button variant="tertiaryColor" disabled client:load>Tertiary Color</Button>

<br class="mb-4" />

<Button variant="linkGray" client:load>Link Gray</Button>
<Button variant="linkGray" disabled client:load>Link Gray</Button>

<br class="mb-4" />

<Button variant="linkColor" client:load>Link Color</Button>
<Button variant="linkColor" disabled client:load>Link Color</Button>

<br class="mb-4" />

<Button variant="danger" client:load>Danger</Button>
<Button variant="danger" disabled client:load>Danger</Button>

<br class="mb-4" />

<Button variant="warning" client:load>Warning</Button>
<Button variant="warning" disabled client:load>Warning</Button>

<br class="mb-4" />

<Button variant="info" client:load>Info</Button>
<Button variant="info" disabled client:load>Info</Button>

<br class="mb-4" />

<Button variant="success" client:load>Success</Button>
<Button variant="success" disabled client:load>Success</Button>

---
import Button from "@technologyadvice/components/ui/button/Button.vue"
import { Download } from "lucide-vue-next"
---

<Button disabled client:load>Disabled</Button>

<br class="mb-4" />

<Button loading={true} client:load />

---
import Button from "@technologyadvice/components/ui/button/Button.vue"
---

<script>
  const buttons = document.querySelectorAll("#interactive")

  buttons.forEach((button) => {
    button.addEventListener("click", test)
  })

  function test() {
    alert("Button is interactive")
  }
</script>

<Button id="interactive" @click="test" client:load>Click me</Button>

---
import Button from "@technologyadvice/components/ui/button/Button.vue"
import { Download } from "lucide-vue-next"
---

<Button size="lg" client:load>
  <Download />
  Download
</Button>

<br class="mb-4" />

<Button size="lg" client:load>
  Download
  <Download />
</Button>

<br class="mb-4" />

<Button size="sm" shape="icon" aria-label="Download icon" client:load>
  <Download />
</Button>

<Button size="md" shape="icon" aria-label="Download icon" client:load>
  <Download />
</Button>

<Button size="lg" shape="icon" aria-label="Download icon" client:load>
  <Download />
</Button>

<Button size="xl" shape="icon" aria-label="Download icon" client:load>
  <Download />
</Button>

<Button size="xxl" shape="icon" aria-label="Download icon" client:load>
  <Download />
</Button>

---
import Button from "@technologyadvice/components/ui/button/Button.vue"
---

<Button style="color: #f7ff00;" client:load>Inline</Button>
<Button
  class="bg-red-500 border-red-300 text-[#00006e] hover:enabled:bg-red-700 focus:enabled:ring-red-300"
  client:load>Class</Button
>