From 134f4a41529e2c56970454c02119821c0431c90f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Wed, 23 Oct 2024 09:38:31 -0400
Subject: [PATCH] next: make `ref` bindable for `<Button />` (#798)

---
 .changeset/thick-ligers-wonder.md                            | 5 +++++
 .../bits-ui/src/lib/bits/button/components/button.svelte     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thick-ligers-wonder.md

diff --git a/.changeset/thick-ligers-wonder.md b/.changeset/thick-ligers-wonder.md
new file mode 100644
index 000000000..e0d72c8d6
--- /dev/null
+++ b/.changeset/thick-ligers-wonder.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Button): make `ref` prop `$bindable`
diff --git a/packages/bits-ui/src/lib/bits/button/components/button.svelte b/packages/bits-ui/src/lib/bits/button/components/button.svelte
index f77bb55ec..af5e07984 100644
--- a/packages/bits-ui/src/lib/bits/button/components/button.svelte
+++ b/packages/bits-ui/src/lib/bits/button/components/button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ButtonRootProps } from "../types.js";
 
-	let { href, type, children, ref, ...restProps }: ButtonRootProps = $props();
+	let { href, type, children, ref = $bindable(), ...restProps }: ButtonRootProps = $props();
 </script>
 
 <svelte:element