From 5decb2a5f5550e71960d59db8bcee66128aec857 Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Wed, 25 Feb 2026 13:56:21 -0600
Subject: [PATCH] feat(components/ui): add reusable Button component

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

diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
new file mode 100644
index 0000000..7f8e747
--- /dev/null
+++ b/src/components/ui/Button.astro
@@ -0,0 +1,22 @@
+---
+import { cx } from '@styled-system/css'
+import {
+  type ButtonVariantProps,
+  button as buttonRecipe
+} from '@styled-system/recipes/button'
+import type { HTMLAttributes } from 'astro/types'
+import type { MergeOmitting } from '@/types/utilities'
+
+type ButtonProps = MergeOmitting<HTMLAttributes<'button'>, ButtonVariantProps>
+
+export type Props = ButtonProps
+
+const { class: className, type = 'button', ...props } = Astro.props
+
+const [buttonRecipeArgs, ButtonProps] = buttonRecipe.splitVariantProps(props)
+const buttonClass = buttonRecipe(buttonRecipeArgs)
+---
+
+<button {...ButtonProps} type={type} class={cx(buttonClass, className)}>
+  <slot />
+</button>