diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md
index a7289f8b9..ed9f90aae 100644
--- a/docs/docs/components/dialog.md
+++ b/docs/docs/components/dialog.md
@@ -2,12 +2,13 @@
 title: Dialog
 description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
 tags: component
+essentials: dialog
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-overview">
+<wa-dialog label="Dialog" with-header with-footer id="dialog-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
@@ -15,7 +16,7 @@ tags: component
 <wa-button>Open Dialog</wa-button>
 
 <script>
-  const dialog = document.querySelector('.dialog-overview');
+  const dialog = document.querySelector('#dialog-overview');
   const openButton = dialog.nextElementSibling;
 
   openButton.addEventListener('click', () => dialog.open = true);
@@ -85,10 +86,10 @@ You can add the special `data-dialog="close"` attribute to a button inside the d
 
 ### Custom Width
 
-Use the `--width` custom property to set the dialog's width.
+Just use the CSS `width` property to set the dialog's width.
 
 ```html {.example}
-<wa-dialog label="Dialog" with-header with-footer class="dialog-width" style="--width: 50vw;">
+<wa-dialog label="Dialog" with-header with-footer class="dialog-width" style="width: 50vw;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
diff --git a/docs/docs/essentials/dialog.md b/docs/docs/essentials/dialog.md
new file mode 100644
index 000000000..72d9fc895
--- /dev/null
+++ b/docs/docs/essentials/dialog.md
@@ -0,0 +1,36 @@
+---
+title: Dialog
+description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
+tags: essentials
+layout: element
+elements:
+  "<dialog>":  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+component: dialog
+---
+
+```html {.example}
+<dialog id="dialog-overview">
+	<header>
+		<h2>Dialog</h2>
+		<button data-dialog="close" class="wa-text">✖️</button>
+	</header>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <footer>
+	<button class="wa-brand" data-dialog="close">Close</button>
+  </footer>
+</dialog>
+
+<button>Open Dialog</button>
+
+<script>
+  const dialog = document.querySelector('#dialog-overview');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.showModal());
+  dialog.addEventListener('click', event => {
+	if (event.target.closest('[data-dialog="close"]')) {
+		dialog.close();
+	}
+  });
+</script>
+```