diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index 4ddece95..45635bbc 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -159,4 +159,12 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
 <Button size="lg" skeleton />
 <Button skeleton />
 <Button skeleton size="field" />
-<Button skeleton size="small" />
\ No newline at end of file
+<Button skeleton size="small" />
+
+## Programmatic focus
+
+Bind to the `ref` prop to access a reference to the underlying button element.
+
+You can use this reference to programmatically focus the button.
+
+<FileSource src="/framed/Button/ProgrammaticFocus" />
diff --git a/docs/src/pages/framed/Button/ProgrammaticFocus.svelte b/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
new file mode 100644
index 00000000..5040808a
--- /dev/null
+++ b/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { Button } from "carbon-components-svelte";
+
+  let ref;
+</script>
+
+<Button bind:ref>Primary button</Button>
+<Button
+  kind="ghost"
+  on:click="{() => {
+    ref?.focus();
+  }}"
+>
+  Click to focus the Primary button
+</Button>