diff --git a/ckanext/nswdesignsystem/templates/macros/nswdesignsystem/dialog.html b/ckanext/nswdesignsystem/templates/macros/nswdesignsystem/dialog.html
new file mode 100644
index 0000000..69e8c52
--- /dev/null
+++ b/ckanext/nswdesignsystem/templates/macros/nswdesignsystem/dialog.html
@@ -0,0 +1,43 @@
+
+{% macro dialog(id, title=null, dismissible=false) %}
+    <div class="nsw-dialog js-dialog" id="{{ id }}" role="dialog">
+        <div class="nsw-dialog__wrapper">
+            <div class="nsw-dialog__container">
+
+                <div class="nsw-dialog__top">
+                    <div class="nsw-dialog__title">
+                        {% if title %}
+                            <h2>{{ title }}</h2>
+                        {% else %}
+                            {{ caller("title") }}
+                        {% endif %}
+                    </div>
+
+
+                    {% if dismissible %}
+                        <div class="nsw-dialog__close">
+                            <button class="nsw-icon-button js-close-dialog">
+                                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
+                                <span class="sr-only">Close</span>
+                            </button>
+                        </div>
+                    {% endif %}
+                </div>
+
+                <div class="nsw-dialog__content">
+                    {{ caller("content") }}
+                </div>
+            </div>
+
+            <div class="nsw-dialog__bottom">
+                {{ caller("footer") }}
+            </div>
+
+        </div>
+    </div>
+
+{% endmacro %}
+
+{% macro trigger(id, label) %}
+    <button class="nsw-button nsw-button--dark js-open-dialog-{{ id }}" aria-haspopup="dialog">{{ label }}</button>
+{% endmacro %}
diff --git a/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_danger.preview.html b/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_danger.preview.html
index 43468fb..0ad1a16 100644
--- a/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_danger.preview.html
+++ b/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_danger.preview.html
@@ -1,22 +1,23 @@
+{% from "macros/nswdesignsystem/dialog.html" import dialog with context  %}
+
+{% set id = "dialog" %}
+
 <div class="nsw-block">
-  <button class="nsw-button nsw-button--dark js-open-dialog-danger" aria-haspopup="dialog">Launch dialog</button>
+  <button class="nsw-button nsw-button--dark js-open-dialog-{{ id }}" aria-haspopup="dialog">Launch dialog</button>
 </div>
 
-<div class="nsw-dialog js-dialog" id="danger" role="dialog" aria-labelledby="danger-title">
-  <div class="nsw-dialog__wrapper">
-    <div class="nsw-dialog__container">
-      <div class="nsw-dialog__top">
-        <div class="nsw-dialog__title">
-          <h2 id="danger-title">Delete file permanently?</h2>
-        </div>
-        </div>
-      <div class="nsw-dialog__content">
+{% call(part) dialog(id) %}
+    {% if part == "title" %}
+        <h2>
+            Delete file permanently?
+        </h2>
+
+    {% elif part == "content" %}
         <p>If you delete this file, you will not be able to recover it. Do you want to delete?</p>
-      </div>
-    </div>
-    <div class="nsw-dialog__bottom">
-      <button class="nsw-button nsw-button--dark nsw-button--danger js-close-dialog">Delete</button>
-      <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">Cancel</button>
-    </div>
-  </div>
-</div>
+
+    {% elif part == "footer" %}
+        <button class="nsw-button nsw-button--dark nsw-button--danger js-close-dialog">Delete</button>
+        <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">Cancel</button>
+
+    {% endif %}
+{% endcall %}
diff --git a/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_dismissible.preview.html b/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_dismissible.preview.html
index a5753b4..d185f5e 100644
--- a/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_dismissible.preview.html
+++ b/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_dismissible.preview.html
@@ -1,28 +1,27 @@
+{% from "macros/nswdesignsystem/dialog.html" import dialog with context  %}
+
+{% set id = "dismissible" %}
+
 <div class="nsw-block">
-  <button class="nsw-button nsw-button--dark js-open-dialog-dismissible" aria-haspopup="dialog">Launch dialog</button>
+  <button class="nsw-button nsw-button--dark js-open-dialog-{{ id }}" aria-haspopup="dialog">Launch dialog</button>
 </div>
 
-<div class="nsw-dialog js-dialog js-dialog-dismiss" id="dismissible" role="dialog" aria-labelledby="dismissible-title">
-  <div class="nsw-dialog__wrapper">
-    <div class="nsw-dialog__container">
-      <div class="nsw-dialog__top">
-        <div class="nsw-dialog__title">
-          <h2 id="dismissible-title">Changes will be lost</h2>
-        </div>
-        <div class="nsw-dialog__close">
-          <button class="nsw-icon-button js-close-dialog">
-            <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
-            <span class="sr-only">Close</span>
-          </button>
-        </div>
-        </div>
-      <div class="nsw-dialog__content">
-        <p>This form contains unsaved changes. By exiting, all unsaved changes will be permanently lost. If you wish to save your changes, return to form and follow the prompts to save your progress. If you do not wish to keep any unsaved changes you can proceed to exit the form. </p>
-      </div>
-    </div>
-    <div class="nsw-dialog__bottom">
+
+
+{% call(part) dialog(id, title="Changes will be lost", dismissible=true) %}
+    {% if part == "title" %}
+        <h2>
+            Delete file permanently?
+        </h2>
+
+    {% elif part == "content" %}
+        <p>
+            This form contains unsaved changes. By exiting, all unsaved changes will be permanently lost. If you wish to save your changes, return to form and follow the prompts to save your progress. If you do not wish to keep any unsaved changes you can proceed to exit the form.
+        </p>
+
+    {% elif part == "footer" %}
       <button class="nsw-button nsw-button--dark nsw-button--danger js-close-dialog">Exit form</button>
       <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">Return to form</button>
-    </div>
-  </div>
-</div>
+
+    {% endif %}
+{% endcall %}
diff --git a/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_transactional.preview.html b/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_transactional.preview.html
index 5edb1d4..6beba45 100644
--- a/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_transactional.preview.html
+++ b/ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_transactional.preview.html
@@ -1,22 +1,24 @@
+{% from "macros/nswdesignsystem/dialog.html" import dialog, trigger with context  %}
+
+{% set id = "transactional" %}
+
 <div class="nsw-block">
-  <button class="nsw-button nsw-button--dark js-open-dialog-transactional" aria-haspopup="dialog">Launch dialog</button>
+    {{ trigger(id, "Launch dialog") }}
 </div>
 
-<div class="nsw-dialog js-dialog" id="transactional" role="dialog" aria-labelledby="transactional-title">
-  <div class="nsw-dialog__wrapper">
-    <div class="nsw-dialog__container">
-      <div class="nsw-dialog__top">
-        <div class="nsw-dialog__title">
-          <h2 id="transactional-title">Your submission was successful</h2>
-        </div>
-        </div>
-      <div class="nsw-dialog__content">
-        <p>Thank you for your submission, it has been successfully received. We aim to respond within 3 business days by your preferred contact method. You can now make another submission or view your active submission.</p>
-      </div>
-    </div>
-    <div class="nsw-dialog__bottom">
-      <button class="nsw-button nsw-button--dark js-close-dialog">Make new submission</button>
-      <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">View submissions</button>
-    </div>
-  </div>
-</div>
+
+{% call(part) dialog(id, title="Changes will be lost") %}
+{% if part == "title" %}
+    <h2>
+        Delete file permanently?
+    </h2>
+
+{% elif part == "content" %}
+    <p>Thank you for your submission, it has been successfully received. We aim to respond within 3 business days by your preferred contact method. You can now make another submission or view your active submission.</p>
+
+{% elif part == "footer" %}
+    <button class="nsw-button nsw-button--dark js-close-dialog">Make new submission</button>
+    <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">View submissions</button>
+
+{% endif %}
+{% endcall %}