diff --git a/libs/components/src/dialog/dialog-overview.stories.mdx b/libs/components/src/dialog/dialog-overview.stories.mdx
index 7acaae3fc..5430634ea 100644
--- a/libs/components/src/dialog/dialog-overview.stories.mdx
+++ b/libs/components/src/dialog/dialog-overview.stories.mdx
@@ -3,9 +3,6 @@ import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs';
 <Meta
   title="Components/Dialog"
   parameters={{
-    docs: {
-      inlineStories: true,
-    },
     layout: 'fullscreen',
     previewTabs: {
       canvas: { hidden: true },
@@ -13,25 +10,6 @@ import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs';
   }}
 />
 
-<style>
-  {`
-  #story--components-dialog--anatomy > div,
-  #story--components-dialog--logout > div,
-  #story--components-dialog--udf > div {
-    height: 20rem !important;
-  }
-  .preview-dark {
-    display: none;
-  }
-  .dark .preview-light {
-    display: none;
-  }
-  .dark .preview-dark {
-    display: block;
-  }
-  `}
-</style>
-
 # Dialogs
 
 ## Basics
@@ -52,10 +30,14 @@ import { Canvas, Meta, DocsContainer, Story } from '@storybook/addon-docs';
 
 ## Examples
 
+### Logout
+
 <Pre>
   <Story id="components-dialog--logout" />
 </Pre>
 
+### Destructive dialog
+
 <Pre>
   <Story id="components-dialog--udf" />
 </Pre>
diff --git a/libs/components/src/dialog/dialog.stories.js b/libs/components/src/dialog/dialog.stories.js
index ffb174a8e..768c155de 100644
--- a/libs/components/src/dialog/dialog.stories.js
+++ b/libs/components/src/dialog/dialog.stories.js
@@ -3,64 +3,71 @@ import './dialog';
 
 export default {
   title: 'Components/Dialog',
-  properties: {
-    darkMode: { current: 'dark', stylePreview: true },
-  },
 };
 
-const Template = ({ isDark }) => {
-  return `<div class="${isDark ? `dark` : null}">
-            <cv-dialog id="dialog1" heading="Dialog header" scrimClickAction="" open>
-              Dialog body text
-              <cv-button slot="primaryAction">Action 2</cv-button>
-              <cv-button slot="secondaryAction">Action 1</cv-button>
-            </cv-dialog>
-          </div>`;
+const Template = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#dialog-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#dialog1');
+        dialog.open = true;
+      });
+    },
+    { once: true }
+  );
+  return `
+    <cv-button id="dialog-button" raised>Open basic dialog</cv-button>
+    <cv-dialog id="dialog1" heading="Dialog header" scrimClickAction="">
+      Dialog body text
+      <cv-button slot="primaryAction" dialogAction="close">Action 2</cv-button>
+      <cv-button slot="secondaryAction" dialogAction="close">Action 1</cv-button>
+    </cv-dialog>`;
 };
 
 export const Basic = dialogComponent.bind({});
-Basic.parameters = {
-  docs: {
-    inlineStories: false,
-  },
-};
 
 export const Anatomy = Template.bind({});
-Anatomy.parameters = {
-  docs: {
-    inlineStories: false,
-  },
-};
 
 const templateLogout = ({}) => {
-  return `<cv-dialog id="example-logout" heading="You will be logged out soon" scrimClickAction="" open>
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#logout-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#example-logout');
+        dialog.open = true;
+      });
+    },
+    { once: true }
+  );
+  return `
+  <cv-button id="logoout-button" raised>Open logout dialog</cv-button>
+  <cv-dialog id="example-logout" heading="You will be logged out soon" scrimClickAction="">
             Due to inactivity, you’ll be logged out in 3 minutes to protect your security.
-            <cv-button slot="primaryAction">Log out</cv-button>
-            <cv-button slot="secondaryAction">Stay logged in</cv-button>
+            <cv-button slot="primaryAction" dialogAction="close">Log out</cv-button>
+            <cv-button slot="secondaryAction" dialogAction="close">Stay logged in</cv-button>
           </cv-dialog>`;
 };
 
 export const Logout = templateLogout.bind({});
-Logout.parameters = {
-  docs: {
-    inlineStories: false,
-  },
-};
 
 const templateUDF = ({}) => {
-  return `<style>
-              cv-formfield {
-                  margin-left: -.75rem;
-              }
-              .key-value {
-                margin-bottom: .5rem;
-                margin-top: .5rem;
-              }
-              .key-value--key {
-                color: --mdc-theme-text-secondary-on-background;
-              }
-          </style>
-          <cv-dialog id="example-udf" heading="Delete User Defined Function" scrimClickAction="" open>
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const button = document.body.querySelector('#udf-button');
+      button.addEventListener('click', () => {
+        const dialog = document.body.querySelector('#example-udf');
+        dialog.open = true;
+      });
+    },
+    { once: true }
+  );
+  return `
+          <cv-button id="udf-button" raised>Open UDF dialog</cv-button>
+          <cv-dialog id="example-udf" heading="Delete User Defined Function" scrimClickAction="" >
             
             <div class="key-value">
               <div class="key-value--key mdc-typography--caption">Function to delete</div>
@@ -69,14 +76,9 @@ const templateUDF = ({}) => {
             <cv-formfield label="I understand that all queries currently using this UDF will be canceled">
               <cv-checkbox class="child"></cv-checkbox>
             </cv-formfield>
-            <cv-button slot="primaryAction" class="destructive primary" disabled>Delete</cv-button>
-            <cv-button slot="secondaryAction">Cancel</cv-button>
+            <cv-button slot="primaryAction" dialogAction="close" class="destructive primary" disabled>Delete</cv-button>
+            <cv-button slot="secondaryAction" dialogAction="close">Cancel</cv-button>
           </cv-dialog>`;
 };
 
 export const UDF = templateUDF.bind({});
-UDF.parameters = {
-  docs: {
-    inlineStories: false,
-  },
-};
diff --git a/libs/components/stories/Introduction.stories.mdx b/libs/components/stories/Introduction.stories.mdx
index 8e66a0cab..4edf6cc38 100644
--- a/libs/components/stories/Introduction.stories.mdx
+++ b/libs/components/stories/Introduction.stories.mdx
@@ -19,14 +19,14 @@ the raw components. We'll layer in documenation over time.
 Ping us in the **#design-system** channel on Slack for help.
 
 <div className="link-list">
-  <a className="link-item" href="/?path=/story/patterns-app-shell--basic">
+  <a className="link-item" href="?path=/docs/patterns-app-shell--overview">
     <span>
       <strong>App shell</strong>
       Our standard starter app, great for multi-level UIs that need to show a dashboard,
       subsections with lists of items, and detail pages to view those items.
     </span>
   </a>
-  <a className="link-item" href="/?path=/story/patterns-kitchen-sink--basic">
+  <a className="link-item" href="?path=/docs/patterns-kitchen-sink--overview">
     <span>
       <strong>Kitchen sink</strong>A large collection of all our components on a
       single screen, to give a high level overview of what's available and to