From 2adca8ce00b27616a7ef70ec9d587fd97da54911 Mon Sep 17 00:00:00 2001
From: madkarmaa <madkarma99@gmail.com>
Date: Thu, 13 Nov 2025 15:01:24 +0100
Subject: [PATCH] feat: add button component

---
 src/lib/components/atoms/Button.svelte | 39 ++++++++++++++++++++++++++
 1 file changed, 39 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..52db6a3
--- /dev/null
+++ b/src/lib/components/atoms/Button.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { WithChildren } from '$types';
+
+	type Props = {
+		buttonStyle: 'filled' | 'tonal' | 'text' | 'outlined';
+		icon?: typeof import('virtual:icons/*').default;
+	} & WithChildren &
+		HTMLButtonAttributes;
+	let { buttonStyle, icon: Icon, children, class: klass, ...rest }: Props = $props();
+</script>
+
+<button class="{buttonStyle} {klass}" {...rest}>
+	{#if Icon}
+		<Icon />
+	{/if}
+	<span class="content">
+		{@render children()}
+	</span>
+</button>
+
+<style>
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 1rem 1.5rem;
+		border-radius: 9999px;
+		cursor: pointer;
+	}
+
+	button:hover {
+	}
+
+	.content {
+		display: inline-block;
+	}
+</style>