Buttons

The button is a simple element to which you can add as much logic as you want, and place it wherever you like.

src/pages/index.astro

---
// Import
import Button from "../components/Button.astro";
---
(...)
<Button />
(...)

---

1. Simple Button

Feel free to add any logic you want; we recommend using artificial intelligence.

Preview

Button

Code

src/components/Buttons.astro

---
//2 Instructions in this component

// ↓ Here you can change the label of the button. ❶
const labelButton = "Button";
---

<button
  id="Button"
  class="text-gray-400 px-6 py-2 bg-gray-950 border-2 border-gray-950 hover:border-gray-600 rounded-xl transition-colors cursor-pointer"
>
  {labelButton}
</button>

<!-- Script -->

<script>
  const myButton = document.getElementById("Button");

  myButton.addEventListener("click", () => {
    console.log("Click");
    // Here you can add your logic when the button is clicked. ❷
  });
</script>