diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx
index e4ddd46f..ee93147c 100644
--- a/docs/src/pages/components/Modal.svx
+++ b/docs/src/pages/components/Modal.svx
@@ -14,6 +14,10 @@
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
+### Multiple modals
+
+<FileSource src="/framed/Modal/ModalMultiple" />
+
 ### Multiple secondary buttons
 
 Use the `secondaryButtons` prop to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
diff --git a/docs/src/pages/framed/Modal/ModalMultiple.svelte b/docs/src/pages/framed/Modal/ModalMultiple.svelte
new file mode 100644
index 00000000..97a0e292
--- /dev/null
+++ b/docs/src/pages/framed/Modal/ModalMultiple.svelte
@@ -0,0 +1,38 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let openCreate = false;
+  let openDelete = false;
+</script>
+
+<Button on:click="{() => (openCreate = true)}">Create database</Button>
+<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}">
+  Delete database
+</Button>
+
+<Modal
+  bind:open="{openCreate}"
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (openCreate = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>
+
+<Modal
+  danger
+  bind:open="{openDelete}"
+  modalHeading="Delete database"
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (openDelete = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>This is a permanent action and cannot be undone.</p>
+</Modal>