docs(button): add "Programmatic focus" example

Related #1830

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" />
+<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" />

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>