diff --git a/docs/src/pages/components/Modal.svx b/docs/src/pages/components/Modal.svx
index 1bd4a3bd..6c9024ea 100644
--- a/docs/src/pages/components/Modal.svx
+++ b/docs/src/pages/components/Modal.svx
@@ -6,6 +6,14 @@
 
 <FileSource src="/framed/Modal/Modal" />
 
+### Custom focus
+
+By default, the modal close button will be focused when opened.
+
+Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).
+
+<FileSource src="/framed/Modal/ModalCustomFocus" />
+
 ### Danger modal
 
 <FileSource src="/framed/Modal/DangerModal" />
@@ -14,13 +22,19 @@
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
+### Has scrolling content
+
+Setting `hasScrollingContent` to `true` increases the vertical space within the modal.
+
+<FileSource src="/framed/Modal/ModalScrollingContent" />
+
 ### 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`.
+Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.
 
 <FileSource src="/framed/Modal/3ButtonModal" />
 
diff --git a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
index e096c3aa..cf69f2ab 100644
--- a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
+++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
   import Send from "carbon-icons-svelte/lib/Send.svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
-  open
+  bind:open
   modalHeading="Invite someone"
   primaryButtonText="Send invitation"
   primaryButtonIcon="{Send}"
diff --git a/docs/src/pages/framed/Modal/ModalCustomFocus.svelte b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
new file mode 100644
index 00000000..ea37142a
--- /dev/null
+++ b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { Button, Modal, TextInput } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  selectorPrimaryFocus="#db-name"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+  <br />
+  <TextInput
+    id="db-name"
+    labelText="Database name"
+    placeholder="Enter database name..."
+  />
+</Modal>
diff --git a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
index 3e8c246e..2c78917f 100644
--- a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="xs"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
diff --git a/docs/src/pages/framed/Modal/ModalLarge.svelte b/docs/src/pages/framed/Modal/ModalLarge.svelte
index 36b9b1be..73a4ac4e 100644
--- a/docs/src/pages/framed/Modal/ModalLarge.svelte
+++ b/docs/src/pages/framed/Modal/ModalLarge.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="lg"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
diff --git a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
index ff0ee426..64f09dc9 100644
--- a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
+++ b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   preventCloseOnClickOutside
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"
diff --git a/docs/src/pages/framed/Modal/ModalScrollingContent.svelte b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
new file mode 100644
index 00000000..5f77745b
--- /dev/null
+++ b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent>
+  <p>
+    Cloudant is a fully managed, distributed database optimized for heavy
+    workloads and fast-growing web and mobile apps, IBM Cloudant is available as
+    an IBM Cloud® service with a 99.99% SLA.
+  </p>
+  <br />
+  <p>
+    The database elastically scales throughput and storage, and its API and
+    replication protocols are compatible with Apache CouchDB for hybrid or
+    multicloud architectures.
+  </p>
+</Modal>
diff --git a/docs/src/pages/framed/Modal/ModalSmall.svelte b/docs/src/pages/framed/Modal/ModalSmall.svelte
index 7fb1e9db..d28fca07 100644
--- a/docs/src/pages/framed/Modal/ModalSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalSmall.svelte
@@ -1,10 +1,14 @@
 <script>
-  import { Modal } from "carbon-components-svelte";
+  import { Button, Modal } from "carbon-components-svelte";
+
+  let open = false;
 </script>
 
+<Button on:click="{() => (open = true)}">Create database</Button>
+
 <Modal
   size="sm"
-  open
+  bind:open
   modalHeading="Create database"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"