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}