From 06eb02776180efc70c002188ccc624a89c178434 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 9 Jan 2026 10:32:36 -0500
Subject: [PATCH] wip

---
 packages/cms/src/temporary.js                 |   1 -
 packages/cms/src/ui.js                        |   1 +
 resources/js/bootstrap/cms/temporary.js       |   1 -
 resources/js/bootstrap/cms/ui.js              |   1 +
 resources/js/bootstrap/components.js          |   2 +-
 resources/js/components/ResourceDeleter.vue   |   2 +-
 .../components/actions/ConfirmableAction.vue  |   2 +-
 .../js/components/assets/Editor/Editor.vue    |   2 +-
 resources/js/components/assets/Upload.vue     |   2 +-
 .../blueprints/BlueprintResetter.vue          |   2 +-
 .../js/components/entries/PublishForm.vue     |   4 +-
 .../field-actions/FieldActionModal.vue        |   1 +
 .../components/fieldsets/FieldsetDeleter.vue  |   2 +-
 .../components/fieldsets/FieldsetResetter.vue |   2 +-
 .../components/fieldtypes/ArrayFieldtype.vue  |   2 +-
 .../components/fieldtypes/TableFieldtype.vue  |   4 +-
 .../js/components/fieldtypes/grid/Grid.vue    |   2 +-
 .../components/fieldtypes/replicator/Set.vue  |   2 +-
 .../js/components/globals/PublishForm.vue     |   2 +-
 .../inputs/relationship/InlinePublishForm.vue |   2 +-
 .../components/revision-history/Restore.vue   |   2 +-
 .../js/components/structures/PageEditor.vue   |   2 +-
 .../js/components/structures/PageTree.vue     |   2 +-
 resources/js/components/terms/PublishForm.vue |   2 +-
 .../two-factor/RecoveryCodesModal.vue         |   2 +-
 .../js/components/two-factor/TwoFactor.vue    |   2 +-
 .../js/components/ui/Listing/Presets.vue      |   6 +-
 .../Modal}/ConfirmationModal.vue              |  42 ++++--
 resources/js/components/ui/index.js           |   1 +
 resources/js/pages/layout/Layout.vue          |   2 +-
 resources/js/pages/preferences/nav/Edit.vue   |   4 +-
 resources/js/pages/users/Passkeys.vue         |   3 +-
 .../js/stories/ConfirmationModal.stories.ts   | 127 ++++++++++++++++++
 .../js/stories/docs/ConfirmationModal.mdx     |  12 ++
 resources/js/stories/docs/Modal.mdx           |   2 +
 resources/js/tests/Package.test.js            |   1 +
 36 files changed, 206 insertions(+), 45 deletions(-)
 rename resources/js/components/{modals => ui/Modal}/ConfirmationModal.vue (69%)
 create mode 100644 resources/js/stories/ConfirmationModal.stories.ts
 create mode 100644 resources/js/stories/docs/ConfirmationModal.mdx

diff --git a/packages/cms/src/temporary.js b/packages/cms/src/temporary.js
index 9f1df9f6044..32c3484d4d1 100644
--- a/packages/cms/src/temporary.js
+++ b/packages/cms/src/temporary.js
@@ -2,7 +2,6 @@ export const {
     HasInputOptions,
     InlineEditForm,
     RelatedItem,
-    ConfirmationModal,
     RevisionHistory,
     RestoreRevision,
     RevisionPreview,
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index b9cbe09c035..6b801315d7f 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -15,6 +15,7 @@ export const {
     CodeEditor,
     Combobox,
     CommandPaletteItem,
+    ConfirmationModal,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/bootstrap/cms/temporary.js b/resources/js/bootstrap/cms/temporary.js
index f2f55a82142..e46ff71df0c 100644
--- a/resources/js/bootstrap/cms/temporary.js
+++ b/resources/js/bootstrap/cms/temporary.js
@@ -1,7 +1,6 @@
 export { default as HasInputOptions } from '../../components/fieldtypes/HasInputOptions.js';
 export { default as InlineEditForm } from '../../components/inputs/relationship/InlineEditForm.vue';
 export { default as RelatedItem } from '../../components/inputs/relationship/Item.vue';
-export { default as ConfirmationModal } from '../../components/modals/ConfirmationModal.vue';
 export { default as RevisionHistory } from '../../components/revision-history/History.vue';
 export { default as RestoreRevision } from '../../components/revision-history/Restore.vue';
 export { default as RevisionPreview } from '../../components/revision-history/Preview.vue';
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 66727a79165..684db0c5a58 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -15,6 +15,7 @@ export {
     CodeEditor,
     Combobox,
     CommandPaletteItem,
+    ConfirmationModal,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index d6a48928a1b..47454014cc9 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -14,7 +14,7 @@ import Slugify from '../components/slugs/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
 import CreateEntryButton from '../components/entries/CreateEntryButton.vue';
 import Portal from '../components/portals/Portal.vue';
-import ConfirmationModal from '../components/modals/ConfirmationModal.vue';
+import ConfirmationModal from '../components/ui/Modal/ConfirmationModal.vue';
 import FieldActionModal from '../components/field-actions/FieldActionModal.vue';
 import ElevatedSessionModal from '../components/modals/ElevatedSessionModal.vue';
 import ResourceDeleter from '../components/ResourceDeleter.vue';
diff --git a/resources/js/components/ResourceDeleter.vue b/resources/js/components/ResourceDeleter.vue
index 682449e1255..0ca529708ae 100644
--- a/resources/js/components/ResourceDeleter.vue
+++ b/resources/js/components/ResourceDeleter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="deleting"
+        :open="deleting"
         :title="modalTitle"
         :bodyText="modalBody"
         :buttonText="__('Delete')"
diff --git a/resources/js/components/actions/ConfirmableAction.vue b/resources/js/components/actions/ConfirmableAction.vue
index 164edd111ac..dce074d8a07 100644
--- a/resources/js/components/actions/ConfirmableAction.vue
+++ b/resources/js/components/actions/ConfirmableAction.vue
@@ -87,7 +87,7 @@ defineExpose({
 
 <template>
     <confirmation-modal
-        v-if="confirming"
+        v-model:open="confirming"
         :title="action.title"
         :danger="action.dangerous"
         :submittable="action.runnable"
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 251ae41c3e7..41c85ba0697 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -168,7 +168,7 @@
             />
 
         <confirmation-modal
-            v-if="closingWithChanges"
+            v-model:open="closingWithChanges"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index f5a14331571..3b6ce478b23 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -32,7 +32,7 @@
 
 
         <confirmation-modal
-            v-if="showNewFilenameModal"
+            :open="showNewFilenameModal"
             :title="__('New Filename')"
             @cancel="showNewFilenameModal = false"
             @confirm="confirmNewFilename"
diff --git a/resources/js/components/blueprints/BlueprintResetter.vue b/resources/js/components/blueprints/BlueprintResetter.vue
index cdfc14d332e..93d8f39170f 100644
--- a/resources/js/components/blueprints/BlueprintResetter.vue
+++ b/resources/js/components/blueprints/BlueprintResetter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="resetting"
+        :open="resetting"
         :title="modalTitle"
         :bodyText="modalBody"
         :buttonText="__('Reset')"
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index f5d418f9fe3..9be7b52d826 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -220,7 +220,7 @@
         />
 
         <confirmation-modal
-            v-if="selectingOrigin"
+            :open="selectingOrigin"
             :title="__('Create Localization')"
             :buttonText="__('Create')"
             @cancel="cancelLocalization()"
@@ -234,7 +234,7 @@
         </confirmation-modal>
 
         <confirmation-modal
-            v-if="pendingLocalization"
+            :open="pendingLocalization"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Continue')"
diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
index 312663e946a..8fd66a75711 100644
--- a/resources/js/components/field-actions/FieldActionModal.vue
+++ b/resources/js/components/field-actions/FieldActionModal.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <confirmation-modal
+            open
             :title="title"
             :danger="dangerous"
             :buttonText="buttonText"
diff --git a/resources/js/components/fieldsets/FieldsetDeleter.vue b/resources/js/components/fieldsets/FieldsetDeleter.vue
index e3da6f9beca..f2b09a150a9 100644
--- a/resources/js/components/fieldsets/FieldsetDeleter.vue
+++ b/resources/js/components/fieldsets/FieldsetDeleter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="deleting"
+        :open="deleting"
         :title="modalTitle"
         :buttonText="__('Delete')"
         :danger="true"
diff --git a/resources/js/components/fieldsets/FieldsetResetter.vue b/resources/js/components/fieldsets/FieldsetResetter.vue
index a76248c6ca3..5ef9a04dce6 100644
--- a/resources/js/components/fieldsets/FieldsetResetter.vue
+++ b/resources/js/components/fieldsets/FieldsetResetter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="resetting"
+        :open="resetting"
         :title="modalTitle"
         :bodyText="modalBody"
         :buttonText="__('Reset')"
diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index bb6bbe750d2..17cf585429a 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -92,7 +92,7 @@
         </div>
 
         <confirmation-modal
-            v-if="deleting !== false"
+            :open="deleting !== false"
             :title="__('Delete Row')"
             :bodyText="__('Are you sure you want to delete this row?')"
             :buttonText="__('Delete')"
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 3e32d12f6f2..a3548434cba 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -61,7 +61,7 @@
             </section>
 
             <confirmation-modal
-                v-if="deletingRow !== false"
+                :open="deletingRow !== false"
                 :title="__('Delete Row')"
                 :bodyText="__('Are you sure you want to delete this row?')"
                 :buttonText="__('Delete')"
@@ -72,7 +72,7 @@
             </confirmation-modal>
 
             <confirmation-modal
-                v-if="deletingColumn !== false"
+                :open="deletingColumn !== false"
                 :title="__('Delete Column')"
                 :bodyText="__('Are you sure you want to delete this column?')"
                 :buttonText="__('Delete')"
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index ed9f4e06ce4..5c95fbd5b1a 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -41,7 +41,7 @@
         </element-container>
 
         <confirmation-modal
-            v-if="deletingRow !== null"
+            :open="deletingRow !== null"
             :title="__('Delete Row')"
             :body-text="__('Are you sure?')"
             :button-text="__('Delete')"
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
index 4423adfd585..73f7ebcddd6 100644
--- a/resources/js/components/fieldtypes/replicator/Set.vue
+++ b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -235,7 +235,7 @@ function onAnimationComplete() {
         </div>
 
         <confirmation-modal
-            v-if="deletingSet"
+            :open="deletingSet"
             :title="__('Delete Set')"
             :body-text="__('Are you sure?')"
             :button-text="__('Delete')"
diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
index 998d2ed35d5..45414f7e828 100644
--- a/resources/js/components/globals/PublishForm.vue
+++ b/resources/js/components/globals/PublishForm.vue
@@ -85,7 +85,7 @@
         />
 
         <confirmation-modal
-            v-if="pendingLocalization"
+            :open="pendingLocalization"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Continue')"
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index 65568c76fbd..94a423cd3e9 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -33,7 +33,7 @@
         </Stack>
 
         <confirmation-modal
-            v-if="closingWithChanges"
+            :open="closingWithChanges"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/revision-history/Restore.vue b/resources/js/components/revision-history/Restore.vue
index 3cd630706a5..01340ca30ec 100644
--- a/resources/js/components/revision-history/Restore.vue
+++ b/resources/js/components/revision-history/Restore.vue
@@ -3,7 +3,7 @@
         <Button @click="confirming = true" :text="__('Restore')" />
 
         <confirmation-modal
-            v-if="confirming"
+            :open="confirming"
             :title="__('Restore Revision')"
             :buttonText="__('Restore')"
             @confirm="restore"
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index ddb41453833..d11eae64b29 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -55,7 +55,7 @@
         </div>
 
         <confirmation-modal
-            v-if="closingWithChanges"
+            :open="closingWithChanges"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index 8f2f03f0fa1..b3b002953bb 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -77,7 +77,7 @@
         </ui-panel>
 
         <confirmation-modal
-            v-if="discardingChanges"
+            :open="discardingChanges"
             :title="__('Discard Changes')"
             :body-text="__('Are you sure?')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index bb393ccbd86..3e892de9ceb 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -111,7 +111,7 @@
         </PublishContainer>
 
         <confirmation-modal
-            v-if="pendingLocalization"
+            :open="pendingLocalization"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Continue')"
diff --git a/resources/js/components/two-factor/RecoveryCodesModal.vue b/resources/js/components/two-factor/RecoveryCodesModal.vue
index 9206ec90e04..8ebacc15d4c 100644
--- a/resources/js/components/two-factor/RecoveryCodesModal.vue
+++ b/resources/js/components/two-factor/RecoveryCodesModal.vue
@@ -87,7 +87,7 @@ function copyToClipboard() {
     </Modal>
 
     <confirmation-modal
-        v-if="confirming"
+        :open="confirming"
         :danger="true"
         :title="__('Are you sure?')"
         @cancel="confirming = false"
diff --git a/resources/js/components/two-factor/TwoFactor.vue b/resources/js/components/two-factor/TwoFactor.vue
index a3634ad8f21..481b762184b 100644
--- a/resources/js/components/two-factor/TwoFactor.vue
+++ b/resources/js/components/two-factor/TwoFactor.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue';
-import ConfirmationModal from '@/components/modals/ConfirmationModal.vue';
+import { ConfirmationModal } from '@ui';
 import TwoFactorSetup from './Setup.vue';
 import TwoFactorRecoveryCodesModal from './RecoveryCodesModal.vue';
 import { requireElevatedSession } from '@/components/elevated-sessions';
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index b373a6d1a62..59fc1dce0b4 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -207,7 +207,7 @@ function deletePreset() {
     </div>
 
     <confirmation-modal
-        v-if="isCreating"
+        :open="isCreating"
         :title="__('Create New View')"
         :buttonText="__('Create')"
         @cancel="isCreating = false"
@@ -222,7 +222,7 @@ function deletePreset() {
     </confirmation-modal>
 
     <confirmation-modal
-        v-if="isRenaming"
+        :open="isRenaming"
         :title="__('Rename View')"
         :buttonText="__('Rename')"
         @cancel="isRenaming = false"
@@ -242,7 +242,7 @@ function deletePreset() {
     </confirmation-modal>
 
     <confirmation-modal
-        v-if="isConfirmingDeletion"
+        :open="isConfirmingDeletion"
         :title="__('Delete View')"
         :bodyText="__('Are you sure you want to delete this view?')"
         :buttonText="__('Delete')"
diff --git a/resources/js/components/modals/ConfirmationModal.vue b/resources/js/components/ui/Modal/ConfirmationModal.vue
similarity index 69%
rename from resources/js/components/modals/ConfirmationModal.vue
rename to resources/js/components/ui/Modal/ConfirmationModal.vue
index d7e319013cb..5d1c12f067c 100644
--- a/resources/js/components/modals/ConfirmationModal.vue
+++ b/resources/js/components/ui/Modal/ConfirmationModal.vue
@@ -1,10 +1,17 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';
 import { Modal, ModalClose, Button, Icon } from '@/components/ui';
 
-const emit = defineEmits(['opened', 'confirm', 'cancel']);
+const emit = defineEmits([
+    'update:open',
+    'opened',
+    'confirm',
+    'cancel'
+]);
 
 const props = defineProps({
+    /** The controlled open state of the modal. */
+    open: { type: Boolean, default: false },
     title: {
         type: String,
     },
@@ -36,21 +43,17 @@ const props = defineProps({
         default: false,
     },
     busy: {
-        type: Boolean,
-        default: false,
+        type: [Boolean, undefined],
+        default: undefined,
     },
 });
 
-onMounted(() => emit('opened'));
-
-const modalOpen = ref(true);
-
 function updateModalOpen(open) {
     if (! open && props.busy) {
         return;
     }
 
-    modalOpen.value = open;
+    emit('update:open', open);
 
     if (! open) emit('cancel');
 }
@@ -59,11 +62,27 @@ function submit() {
     if (props.busy) return;
 
     emit('confirm');
+
+    if (shouldCloseOnSubmit.value) {
+        updateModalOpen(false);
+    }
 }
+
+const shouldCloseOnSubmit = computed(() => {
+    // If the busy prop is provided, we will assume they will handle the open state externally.
+    return props.busy === undefined;
+});
 </script>
 
 <template>
-    <Modal ref="modal" :title="__(title)" :open="modalOpen" @update:open="updateModalOpen">
+    <Modal
+        ref="modal"
+        :title="__(title)"
+        :open="open"
+        :dismissible="cancellable"
+        @update:open="updateModalOpen"
+        @opened="emit('opened')"
+    >
         <div
             v-if="busy"
             class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-gray-850"
@@ -78,9 +97,8 @@ function submit() {
 
         <template v-if="cancellable || submittable" #footer>
             <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
-                <ModalClose asChild>
+                <ModalClose asChild v-if="cancellable">
                     <Button
-                        v-if="cancellable"
                         variant="ghost"
                         :disabled="busy"
                         :text="__(cancelText)"
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 24e6b852070..828345ae6bd 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -12,6 +12,7 @@ export { default as Checkbox } from './Checkbox/Item.vue';
 export { default as CheckboxGroup } from './Checkbox/Group.vue';
 export { default as CodeEditor } from './CodeEditor.vue';
 export { default as Combobox } from './Combobox/Combobox.vue';
+export { default as ConfirmationModal } from './Modal/ConfirmationModal.vue';
 export { default as Context } from './Context/Context.vue';
 export { default as ContextFooter } from './Context/Footer.vue';
 export { default as ContextHeader } from './Context/Header.vue';
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
index 84ccf638e7b..e3a6e18b9df 100644
--- a/resources/js/pages/layout/Layout.vue
+++ b/resources/js/pages/layout/Layout.vue
@@ -49,7 +49,7 @@ provide('layout', {
         />
 
         <confirmation-modal
-            v-if="$root.copyToClipboardModalUrl"
+            :open="$root.copyToClipboardModalUrl !== null"
             :cancellable="false"
             :button-text="__('OK')"
             :title="__('Copy to clipboard')"
diff --git a/resources/js/pages/preferences/nav/Edit.vue b/resources/js/pages/preferences/nav/Edit.vue
index fe721b8751e..a46fd7139c4 100644
--- a/resources/js/pages/preferences/nav/Edit.vue
+++ b/resources/js/pages/preferences/nav/Edit.vue
@@ -179,7 +179,7 @@
         />
 
         <confirmation-modal
-            v-if="confirmingReset"
+            :open="confirmingReset"
             :title="__('Reset')"
             :bodyText="__('Are you sure you want to reset nav customizations?')"
             :buttonText="__('Reset')"
@@ -189,7 +189,7 @@
         />
 
         <confirmation-modal
-            v-if="confirmingRemoval"
+            :open="confirmingRemoval"
             :title="__('Remove')"
             :bodyText="__('Are you sure you want to remove this section and all of its children?')"
             :buttonText="__('Remove')"
diff --git a/resources/js/pages/users/Passkeys.vue b/resources/js/pages/users/Passkeys.vue
index 12c8c5be5a0..2eed0575b0d 100644
--- a/resources/js/pages/users/Passkeys.vue
+++ b/resources/js/pages/users/Passkeys.vue
@@ -4,8 +4,7 @@ import { startRegistration, browserSupportsWebAuthn } from '@simplewebauthn/brow
 import { router } from '@inertiajs/vue3';
 import axios from 'axios'
 import Head from '@/pages/layout/Head.vue';
-import { Header, Button, EmptyStateMenu, EmptyStateItem, Listing, DropdownItem, Modal, Input, ModalClose, Field } from '@ui';
-import ConfirmationModal from '@/components/modals/ConfirmationModal.vue';
+import { Header, Button, EmptyStateMenu, EmptyStateItem, Listing, DropdownItem, Modal, ConfirmationModal, Input, ModalClose, Field } from '@ui';
 import { toggleArchitecturalBackground } from '@/pages/layout/architectural-background.js';
 
 const props = defineProps([
diff --git a/resources/js/stories/ConfirmationModal.stories.ts b/resources/js/stories/ConfirmationModal.stories.ts
new file mode 100644
index 00000000000..576c3ccf828
--- /dev/null
+++ b/resources/js/stories/ConfirmationModal.stories.ts
@@ -0,0 +1,127 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import { Button, Badge, ConfirmationModal, Icon } from '@ui';
+
+const meta = {
+    title: 'Overlays/ConfirmationModal',
+    component: ConfirmationModal,
+} satisfies Meta<typeof ConfirmationModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: {
+                code: `
+                    <ConfirmationModal
+                        v-model:open="isConfirming"
+                        body-text="Do you really want to do that?"
+                        @confirm="hasConfirmed = true"
+                    />
+                `
+            }
+        }
+    },
+    render: () => ({
+        components: { ConfirmationModal, Button, Badge },
+        data: () => ({
+            isConfirming: false,
+            hasConfirmed: false,
+        }),
+        template: `
+            <div class="flex items-center gap-2">
+                <Button text="Confirm" @click="isConfirming = true" />
+                <Badge color="green" text="Confirmed" icon="checkmark" v-if="hasConfirmed" />
+                <ConfirmationModal
+                    v-model:open="isConfirming"
+                    body-text="Do you really want to do that?"
+                    @confirm="hasConfirmed = true"
+                />
+            </div>
+        `,
+    }),
+};
+
+
+export const ViaProp: Story = {
+    render: () => ({
+        components: { ConfirmationModal, Button, Icon },
+        data: () => ({
+            isOpen: false,
+            isConfirmed: false,
+        }),
+        template: `
+            <div class="flex items-center gap-2">
+                <Button
+                    :text="isConfirmed ? 'Confirmed' : 'Confirm'"
+                    :disabled="isConfirmed"
+                    :icon="isConfirmed ? 'checkmark' : null"
+                    @click="isOpen = true"
+                />
+
+                <Button
+                    v-if="isConfirmed"
+                    icon="x"
+                    text="Reset"
+                    variant="ghost"
+                    @click="isConfirmed = false"
+                />
+            </div>
+
+            <ConfirmationModal
+                v-model:open="isOpen"
+                @confirm="isConfirmed = true"
+            />
+        `
+    }),
+};
+
+
+
+export const Busy: Story = {
+    render: () => ({
+        components: { ConfirmationModal, Button, Icon },
+        data: () => ({
+            isOpen: false,
+            isConfirmed: false,
+            isBusy: false,
+        }),
+        methods: {
+            confirm() {
+                this.isBusy = true;
+                setTimeout(() => {
+                    this.isConfirmed = true;
+                    this.isBusy = false;
+                    this.isOpen = false;
+                }, 1000);
+            }
+        },
+        template: `
+            <div class="flex items-center gap-2">
+                <Button
+                    :text="isConfirmed ? 'Confirmed' : 'Confirm'"
+                    :disabled="isConfirmed"
+                    :icon="isConfirmed ? 'checkmark' : null"
+                    :loading="isBusy"
+                    @click="isOpen = true"
+                />
+
+                <Button
+                    v-if="isConfirmed"
+                    icon="x"
+                    text="Reset"
+                    variant="ghost"
+                    @click="isConfirmed = false"
+                />
+            </div>
+
+            <ConfirmationModal
+                v-model:open="isOpen"
+                :busy="isBusy"
+                @confirm="confirm"
+            />
+        `
+    }),
+};
diff --git a/resources/js/stories/docs/ConfirmationModal.mdx b/resources/js/stories/docs/ConfirmationModal.mdx
new file mode 100644
index 00000000000..28e3b92fac4
--- /dev/null
+++ b/resources/js/stories/docs/ConfirmationModal.mdx
@@ -0,0 +1,12 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ConfirmationModalStories from '../ConfirmationModal.stories';
+
+<Meta of={ConfirmationModalStories} />
+
+# Confirmation Modal
+A wrapper around the [Modal](?path=/docs/overlays-modal--docs) component for simple confirmation dialogs.
+
+<Canvas of={ConfirmationModalStories._DocsIntro} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={ConfirmationModalStories} />
diff --git a/resources/js/stories/docs/Modal.mdx b/resources/js/stories/docs/Modal.mdx
index 04dc554938f..019066e21cc 100644
--- a/resources/js/stories/docs/Modal.mdx
+++ b/resources/js/stories/docs/Modal.mdx
@@ -6,6 +6,8 @@ import * as ModalStories from '../Modal.stories';
 # Modal
 Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
 
+> For simple confirmations, there is a [Confirmation Modal](?path=/docs/overlays-confirmationmodal--docs) component that wraps this component.
+
 <Canvas of={ModalStories._DocsIntro} sourceState={'shown'} />
 
 ## Title
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 11975d0b29a..be9c3ce9590 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -121,6 +121,7 @@ it('exports ui', async () => {
         'CheckboxGroup',
         'CodeEditor',
         'Combobox',
+        'ConfirmationModal',
         'Context',
         'ContextFooter',
         'ContextHeader',