From c11fa9465c21a7d893bb6793fd0440bb8b3a7ec9 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sat, 13 Mar 2021 05:14:20 -0800
Subject: [PATCH] docs(button): extract selected, icon-only button example

---
 docs/src/pages/components/Button.svx          |  4 +--
 .../Button/SelectedIconOnlyButton.svelte      | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte

diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index bee4bcdc..d464c41c 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -64,9 +64,7 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
 
 Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
 
-<Button isSelected={index === 0} kind="ghost" iconDescription="Bold" icon={TextBold16} on:click={() => (index = 0)} />
-<Button isSelected={index === 1} kind="ghost" iconDescription="Italicize" icon={TextItalic16} on:click={() => (index = 1)} />
-<Button isSelected={index === 2} kind="ghost" iconDescription="Underline" icon={TextUnderline16} on:click={() => (index = 2)} />
+<FileSource src="/framed/Button/SelectedIconOnlyButton" />
 
 ### Link button
 
diff --git a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
new file mode 100644
index 00000000..ca23da37
--- /dev/null
+++ b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
@@ -0,0 +1,30 @@
+<script>
+  import { Button } from "carbon-components-svelte";
+  import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
+  import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
+  import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
+
+  let index = 1;
+</script>
+
+<Button
+  isSelected="{index === 0}"
+  kind="ghost"
+  iconDescription="Bold"
+  icon="{TextBold16}"
+  on:click="{() => (index = 0)}"
+/>
+<Button
+  isSelected="{index === 1}"
+  kind="ghost"
+  iconDescription="Italicize"
+  icon="{TextItalic16}"
+  on:click="{() => (index = 1)}"
+/>
+<Button
+  isSelected="{index === 2}"
+  kind="ghost"
+  iconDescription="Underline"
+  icon="{TextUnderline16}"
+  on:click="{() => (index = 2)}"
+/>