From a0949e64a6b85a333d2da4455a9d571458f01c7f Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Mon, 17 Nov 2025 18:52:33 +0100
Subject: [PATCH] feat: add Button component with variant styles and click
 handling

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

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
new file mode 100644
index 0000000..310856e
--- /dev/null
+++ b/src/lib/components/atoms/Button.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const variants = {
+		primary:
+			'px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-xl transition-all duration-200 ease-in-out disabled:opacity-70 disabled:cursor-not-allowed',
+		secondary:
+			'px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 rounded-xl transition-all duration-200 ease-in-out',
+		danger:
+			'px-4 py-2 text-sm font-medium text-white bg-red-500 hover:bg-red-600 rounded-xl transition-all duration-200 ease-in-out disabled:opacity-70 disabled:cursor-not-allowed'
+	};
+
+	type Props = {
+		children: Snippet;
+		onClick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		variant?: keyof typeof variants;
+		href?: string;
+	};
+	let { children, onClick, disabled, variant = 'primary', href }: Props = $props();
+</script>
+
+{#if href}
+	<a {href} class={variants[variant]}>
+		{@render children()}
+	</a>
+{:else}
+	<button class={variants[variant]} onclick={onClick} {disabled}>
+		{@render children()}
+	</button>
+{/if}