🎨 add ref to button

tonightpass · Aug 29, 2024 · 95c1f94 · 95c1f94
1 parent bce6cea
commit 95c1f94
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/.changeset/tiny-cameras-hunt.md b/.changeset/tiny-cameras-hunt.md
@@ -0,0 +1,5 @@
+---
+"kitchn": patch
+---
+
+Add ref to Button
diff --git a/packages/kitchn/src/components/Button/index.tsx b/packages/kitchn/src/components/Button/index.tsx
@@ -31,21 +31,25 @@ export type ButtonProps = KitchnComponent<
   React.ButtonHTMLAttributes<HTMLButtonElement>
 >;
 
-const ButtonComponent = styled(
-  ({
-    as: Component = "button",
-    children,
-    loading,
-    size,
-    width,
-    prefix,
-    suffix,
-    htmlType,
-    ...props
-  }: ButtonProps) => {
+const ForwardedButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      as: Component = "button",
+      children,
+      loading,
+      size,
+      width,
+      prefix,
+      suffix,
+      htmlType,
+      ...props
+    },
+    ref: React.ForwardedRef<HTMLButtonElement>,
+  ) => {
     const theme = useTheme();
     return (
       <Component
+        ref={ref}
         aria-label={children ? undefined : "Button"}
         aria-busy={loading ? "true" : undefined}
         aria-disabled={props.disabled ? "true" : undefined}
@@ -78,7 +82,11 @@ const ButtonComponent = styled(
       </Component>
     );
   },
-)<ButtonProps>`
+);
+
+ForwardedButton.displayName = "Button";
+
+const ButtonComponent = styled(ForwardedButton)<ButtonProps>`
   position: relative;
   display: flex;
   align-items: center;