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