From 95c1f9496951e4fe649054fe27b10fce99973c1c Mon Sep 17 00:00:00 2001
From: Antoine Kingue <contact@antoinek.fr>
Date: Thu, 29 Aug 2024 10:54:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20add=20ref=20to=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/tiny-cameras-hunt.md               |  5 +++
 .../kitchn/src/components/Button/index.tsx    | 34 ++++++++++++-------
 2 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/tiny-cameras-hunt.md

diff --git a/.changeset/tiny-cameras-hunt.md b/.changeset/tiny-cameras-hunt.md
new file mode 100644
index 000000000..138f9cf03
--- /dev/null
+++ 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
index 224c5b545..983f85431 100644
--- 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;