From f42c4b8e0a93e31484848691cd3fa54f6f7db5ef Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Fri, 20 Mar 2026 11:40:07 -0600
Subject: [PATCH] feat: add reusable Button component

---
 src/components/ui/Button.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/ui/Button.tsx

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..cd27a83
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,29 @@
+import { cx } from '@styled-system/css'
+import { type ButtonVariantProps, button } from '@styled-system/recipes/button'
+import type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react'
+import type { MergeOmitting } from '@/types/helpers'
+
+export type ButtonProps = MergeOmitting<
+  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  ButtonVariantProps
+>
+
+const Button: FC<ButtonProps> = ({
+  className,
+  type = 'button',
+  children,
+  ...props
+}) => {
+  const [buttonArgs, restProps] = button.splitVariantProps(props)
+  return (
+    <button
+      type={type}
+      {...restProps}
+      className={cx(button(buttonArgs), className)}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button