diff --git a/.changelog/11868.txt b/.changelog/11868.txt
new file mode 100644
index 000000000..a81ac0683
--- /dev/null
+++ b/.changelog/11868.txt
@@ -0,0 +1,5 @@
+```release-note:bug
+ui: Fix an issue where attempting to delete a policy from the policy detail page when
+attached to a token would result in the delete button disappearing and no
+deletion being attempted
+```
diff --git a/ui/packages/consul-ui/app/components/buttons/index.scss b/ui/packages/consul-ui/app/components/buttons/index.scss
index d7112051d..6bf35de27 100644
--- a/ui/packages/consul-ui/app/components/buttons/index.scss
+++ b/ui/packages/consul-ui/app/components/buttons/index.scss
@@ -13,6 +13,7 @@ button.type-cancel {
   @extend %secondary-button;
 }
 .with-confirmation .type-delete,
+.modal-dialog .type-delete,
 %app-view-content form button[type='button'].type-delete {
   @extend %dangerous-button;
 }
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/README.mdx b/ui/packages/consul-ui/app/components/modal-dialog/README.mdx
index 0fbcbde88..c249255c0 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/README.mdx
+++ b/ui/packages/consul-ui/app/components/modal-dialog/README.mdx
@@ -3,30 +3,8 @@ class: ember
 ---
 # ModalDialog
 
-## Arguments
-
-| Argument | Type | Default | Description |
-| --- | --- | --- | --- |
-| `onopen` | `Function` | `undefined` | A function to call when the modal has opened |
-| `onclose` | `Function` | `undefined` | A function to call when the modal has closed |
-| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported |
-
-## Exports
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `open` | `Function` | Opens the modal dialog |
-| `close` | `Function` | Closes the modal dialog |
-
-Works in tandem with `<ModalLayer />` to render modals. First of all ensure
-you have a modal layer on the page (it doesn't have to be in the same
-template)
-
-```hbs
-<ModalLayer />
-```
-
-Then all modals will be rendered into the `<ModalLayer />` for example:
+Consul UIs modal component is a thin wrapper around the excellent `a11y-dialog`. The
+most common usage will be something like the below:
 
 ```hbs preview-template
 <ModalDialog
@@ -67,3 +45,30 @@ as |modal|>
 </button>
 
 ```
+All modals work in tandem with `<ModalLayer />` to render modals. First of all ensure
+you have a modal layer on the page (it doesn't have to be in the same
+template)
+
+```hbs
+<ModalLayer />
+```
+
+Then all modals will be rendered into the `<ModalLayer />`.
+
+## Arguments
+
+| Argument | Type | Default | Description |
+| --- | --- | --- | --- |
+| `onopen` | `Function` | `undefined` | A function to call when the modal has opened |
+| `onclose` | `Function` | `undefined` | A function to call when the modal has closed |
+| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported |
+| `open` | `Boolean` | `false` | Whether the modal should be initialized in its 'open' state. Useful if the modal should be controlled via handlebars conditionals. Please note this argument it not yet reactive, i.e. it is only checked on component insert not attribute update. An improvement here would be to respect this value during the update of the attribute. |
+
+## Exports
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `open` | `Function` | Opens the modal dialog |
+| `close` | `Function` | Closes the modal dialog |
+
+
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.js b/ui/packages/consul-ui/app/components/modal-dialog/index.js
index 49e93b0d2..c7e1776fe 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.js
+++ b/ui/packages/consul-ui/app/components/modal-dialog/index.js
@@ -11,6 +11,9 @@ export default Component.extend(Slotted, {
       this.dialog = new A11yDialog($el);
       this.dialog.on('hide', () => this.onclose({ target: $el }));
       this.dialog.on('show', () => this.onopen({ target: $el }));
+      if (this.open) {
+        this.dialog.show();
+      }
     },
     disconnect: function($el) {
       this.dialog.destroy();
diff --git a/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs b/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs
index 1b75737bb..bb362b978 100644
--- a/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs
@@ -48,6 +48,7 @@
               <ModalDialog
                 data-test-delete-modal
                 @onclose={{action cancel}}
+                @open={{true}}
                 @aria={{hash
                   label="Policy in Use"
                 }}
diff --git a/ui/packages/consul-ui/tests/pages/dc/acls/policies/edit.js b/ui/packages/consul-ui/tests/pages/dc/acls/policies/edit.js
index d3123ce2f..6324b3ede 100644
--- a/ui/packages/consul-ui/tests/pages/dc/acls/policies/edit.js
+++ b/ui/packages/consul-ui/tests/pages/dc/acls/policies/edit.js
@@ -9,7 +9,7 @@ export default function(visitable, submitable, deletable, cancelable, clickable,
     datacenter: clickable('[name="policy[Datacenters]"]'),
     deleteModal: {
       resetScope: true,
-      scope: '[data-test-delete-modal]',
+      scope: '[data-test-delete-modal]:not([aria-hidden="true"])',
       ...deletable({}),
     },
   };