diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index fc28a13e1..937ef66db 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined = undefined;
     export let registration: ButtonRegistration | undefined = undefined;
 
-    let detach_: boolean;
+    let detached: boolean;
     let position_: ButtonPosition;
     let style: string;
 
@@ -41,24 +41,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     if (registration) {
         const { detach, position } = registration;
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
         position.subscribe((value: ButtonPosition) => (position_ = value));
     } else if (hasContext(buttonGroupKey)) {
         const registerComponent = getContext<Register<ButtonRegistration>>(
             buttonGroupKey
         );
         const { detach, position } = registerComponent();
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
         position.subscribe((value: ButtonPosition) => (position_ = value));
     } else {
-        detach_ = false;
+        detached = false;
         position_ = ButtonPosition.Standalone;
     }
 </script>
 
 <!-- div in WithTheming is necessary to preserve item position -->
 <WithTheming {id} {style}>
-    <Detachable detach={detach_}>
+    <Detachable {detached}>
         <slot />
     </Detachable>
 </WithTheming>
diff --git a/ts/components/ButtonToolbarItem.svelte b/ts/components/ButtonToolbarItem.svelte
index 7034d5838..575f5a1ad 100644
--- a/ts/components/ButtonToolbarItem.svelte
+++ b/ts/components/ButtonToolbarItem.svelte
@@ -14,19 +14,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined = undefined;
     export let registration: ButtonGroupRegistration | undefined = undefined;
 
-    let detach_: boolean;
+    let detached: boolean;
 
     if (registration) {
         const { detach } = registration;
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
     } else if (hasContext(buttonToolbarKey)) {
         const registerComponent = getContext<Register<ButtonGroupRegistration>>(
             buttonToolbarKey
         );
         const { detach } = registerComponent();
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
     } else {
-        detach_ = false;
+        detached = false;
     }
 </script>
 
@@ -38,7 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <!-- div is necessary to preserve item position -->
 <div {id}>
-    <Detachable detach={detach_}>
+    <Detachable {detached}>
         <slot />
     </Detachable>
 </div>
diff --git a/ts/components/Detachable.svelte b/ts/components/Detachable.svelte
index d58037b37..32776bbef 100644
--- a/ts/components/Detachable.svelte
+++ b/ts/components/Detachable.svelte
@@ -3,9 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    export let detach = false;
+    export let detached = false;
 </script>
 
-{#if !detach}
+{#if !detached}
     <slot />
 {/if}