From 72ac7192aed0c7a132d01ed3ce6ceaf8110548ea Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 15:24:30 -0800
Subject: [PATCH] docs(toggle): add reactive example

---
 docs/src/pages/components/Toggle.svx          |  4 ++++
 .../pages/framed/Toggle/ToggleReactive.svelte | 22 +++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 docs/src/pages/framed/Toggle/ToggleReactive.svelte

diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
index 9a74efcd..727cc63c 100644
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@@ -15,6 +15,10 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <Toggle labelText="Push notifications" toggled />
 
+### Reactive example
+
+<FileSource src="/framed/Toggle/ToggleReactive" />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
diff --git a/docs/src/pages/framed/Toggle/ToggleReactive.svelte b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
new file mode 100644
index 00000000..e1f5549f
--- /dev/null
+++ b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { Toggle, Button } from "carbon-components-svelte";
+
+  let toggled = true;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Toggle labelText="Push notifications" bind:toggled />
+
+<div>
+  <Button size="small" on:click="{() => (toggled = !toggled)}">
+    Toggle
+    {toggled ? 'off' : 'on'}
+  </Button>
+</div>
+
+<div>Toggled: {toggled}</div>