diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index 2507c9e0..07d8ca7a 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -1,7 +1,3 @@
----
-description: High-level description
----
-
 <script>
   import { Button } from "carbon-components-svelte";
   import Add16 from "carbon-icons-svelte/lib/Add16";
@@ -48,7 +44,7 @@ Set `hasIconOnly` to `true` to use the icon-only button variant.
 
 The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively.
 
-<Button hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} />
+<Button tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} />
 
 ### Link button
 
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 205ffd36..af6ca5b8 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -80,6 +80,7 @@
   $: if (ctx && ref) {
     ctx.declareRef(ref);
   }
+  $: hasIconOnly = icon && !$$slots.default;
   $: buttonProps = {
     role: "button",
     type: href && !disabled ? undefined : type,