From 4ab7bde49ed08491dd6b01cd0b07a7e2b2929d55 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Thu, 12 Dec 2024 04:36:54 +0100
Subject: [PATCH] Components: Add button

---
 src/lib/components/Button.svelte | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/lib/components/Button.svelte

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
new file mode 100644
index 0000000..12f48e9
--- /dev/null
+++ b/src/lib/components/Button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  let {
+    id = "",
+    name = "",
+    formaction = "",
+    label,
+    color,
+    disabled = false,
+  } = $props();
+</script>
+
+<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
+<button
+  {id}
+  {name}
+  {formaction}
+  {disabled}
+  class="btn btn-{color}"
+  style="--tw-bg-opacity: 1">{label}</button
+>