1 files changed, 57 insertions, 0 deletions
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
new file mode 100644
index 0000000..e0787c2
--- /dev/null
+++ b/apps/website/src/components/base/Button.astro
@@ -0,0 +1,57 @@
+---
+import type { Icons } from "@components/icons/Icon.astro";
+import Icon from "@components/icons/Icon.astro";
+import type { HTMLAttributes } from "astro/types";
+
+const styles = {
+	primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4",
+	secondary: "bg-blue-100 text-blue-500 hover:bg-blue-50 active:bg-blue-200 disabled:bg-blue-50 disabled:text-blue-200",
+}
+
+const sizes = {
+	sm: "px-4 py-2 text-sm",
+	md: "px-5 py-2 text-md",
+	lg: "px-6 py-3 text-lg rounded-2xl"
+}
+
+const iconSize = {
+	sm: 15,
+	md: 16,
+	lg: 24
+}
+
+interface Props extends HTMLAttributes<"button"> {
+	style?: keyof typeof styles
+	size?: keyof typeof sizes
+	text?: string
+	iconLeft?: Icons
+	iconRight?: Icons
+	href?: string
+}
+
+const {
+	style = "primary",
+	size = "md",
+    text = "",
+	iconLeft = "",
+	iconRight = "",
+	...rest
+} = Astro.props;
+
+const className = [
+	"flex flex-row justify-center items-center text-center focus-visible:ring-offset-4 focus-visible:outline-offset-4",
+	"rounded-xl font-medium",
+	styles[style],
+	sizes[size],
+	"transition-colors",
+	rest.class
+].join(" ");
+
+const Element = rest.href ? "a" : "button" as any;
+---
+
+<Element {...rest} class={className}>
+	{iconLeft && <span class="mr-2"><Icon icon={iconLeft} size={iconSize[size]}></Icon></span>}
+	{text ? text : <slot />}
+	{iconRight && <span class="ml-2"><Icon icon={iconRight} size={iconSize[size]}></Icon></span>}
+</Element>