From afae825d62993445fe074d61291a906dbc38b29c Mon Sep 17 00:00:00 2001
From: kyletsang <6854874+kyletsang@users.noreply.github.com>
Date: Thu, 21 Aug 2025 23:30:00 -0700
Subject: [PATCH] fix(Button): fix button prop inference when using as prop

---
 src/Button.tsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/Button.tsx b/src/Button.tsx
index c830ea2..8412126 100644
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DynamicRefForwardingComponent } from './types.js';
 
 export type ButtonType = 'button' | 'reset' | 'submit';
 
@@ -108,7 +109,7 @@ export function useButtonProps({
   ];
 }
 
-export interface BaseButtonProps {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLElement> {
   /**
    * Control the underlying rendered element directly by passing in a valid
    * component type
@@ -127,21 +128,18 @@ export interface BaseButtonProps {
   rel?: string | undefined;
 }
 
-export interface ButtonProps
-  extends BaseButtonProps,
-    React.ComponentPropsWithoutRef<'button'> {}
-
-const Button = React.forwardRef<HTMLElement, ButtonProps>(
-  ({ as: asProp, disabled, ...props }, ref) => {
-    const [buttonProps, { tagName: Component }] = useButtonProps({
-      tagName: asProp,
-      disabled,
-      ...props,
-    });
-
-    return <Component {...props} {...buttonProps} ref={ref} />;
-  },
-);
+const Button: DynamicRefForwardingComponent<'button', ButtonProps> =
+  React.forwardRef<HTMLElement, ButtonProps>(
+    ({ as: asProp, disabled, ...props }, ref) => {
+      const [buttonProps, { tagName: Component }] = useButtonProps({
+        tagName: asProp,
+        disabled,
+        ...props,
+      });
+
+      return <Component {...props} {...buttonProps} ref={ref} />;
+    },
+  );
 
 Button.displayName = 'Button';