From d6a3525744e276453f30977fddde6d35d57cf123 Mon Sep 17 00:00:00 2001
From: Ryan Hamilton <ryan@ryanahamilton.com>
Date: Tue, 18 Aug 2026 14:58:53 -0400
Subject: [PATCH] UI: Make dialogs consistent and fix their dark mode
 background

Dialog scaffolding was hand-assembled in around fifty places and had
drifted apart: close triggers, mount flags, heading sizes and the
placement of action buttons all varied, so a dialog's chrome depended on
which screen happened to open it. Keeping any of that consistent relied
on each author copying the surrounding code correctly, and several
dialogs had already diverged.

In dark mode Chakra's default panel background resolves much darker than
the page background, leaving dialogs looking detached from the app behind
them. Light mode resolves both to white, so the discrepancy was easy to
miss and had gone unnoticed.

Giving the scaffolding a single definition means the chrome is consistent
by construction rather than by convention, and puts theming in one place
that applies to every dialog at once.
---
 .../components/Clear/Run/ClearRunDialog.tsx   | 151 ++++++-------
 .../ClearGroupTaskInstanceDialog.tsx          | 179 +++++++--------
 .../TaskInstance/ClearTaskInstanceDialog.tsx  | 192 ++++++++--------
 .../ui/src/components/ConfirmationModal.tsx   |  53 ++---
 .../ui/src/components/DAGWarningsModal.tsx    |  52 ++---
 .../ui/src/components/DeleteDialog.tsx        |  57 +++--
 .../src/components/DisplayMarkdownButton.tsx  |  12 +-
 .../components/HITLReview/HITLReviewModal.tsx | 100 +++++----
 .../KeyboardShortcutsModal.tsx                |  74 +++----
 .../components/MarkAs/Run/MarkRunAsDialog.tsx |  67 +++---
 .../TaskGroup/MarkTaskGroupAsDialog.tsx       | 139 ++++++------
 .../TaskInstance/MarkTaskInstanceAsDialog.tsx | 142 ++++++------
 .../ui/src/components/MarkdownModal.tsx       |  12 +-
 .../components/TriggerDag/TriggerDAGModal.tsx | 148 ++++++-------
 .../src/components/ui/Dialog/CloseTrigger.tsx |  14 +-
 .../ui/src/components/ui/Modal/Modal.test.tsx | 183 ++++++++++++++++
 .../ui/src/components/ui/Modal/Modal.tsx      | 107 +++++++++
 .../ui/src/components/ui/Modal/index.ts       |  19 ++
 .../src/airflow/ui/src/components/ui/index.ts |  29 +--
 .../ui/src/layouts/Nav/LanguageModal.tsx      |  14 +-
 .../ui/src/layouts/Nav/TimezoneModal.tsx      |  14 +-
 .../src/layouts/Nav/TokenGenerationModal.tsx  |  96 ++++----
 .../AssetStateStore/AssetStateStoreModal.tsx  |  87 ++++----
 .../Asset/CreateAssetEventModal.test.tsx      |  32 +--
 .../src/pages/Asset/CreateAssetEventModal.tsx | 160 +++++++-------
 .../pages/Connections/AddConnectionButton.tsx |  32 +--
 .../Connections/DeleteConnectionButton.tsx    |  70 +++---
 .../Connections/DeleteConnectionsButton.tsx   |  70 +++---
 .../Connections/EditConnectionButton.tsx      |  38 ++--
 .../Dag/Backfills/BackfillDagRunsModal.tsx    |  47 ++--
 .../airflow/ui/src/pages/Dag/Code/Code.tsx    |  40 ++--
 .../ui/src/pages/Dag/DagImportErrorModal.tsx  |  68 +++---
 .../pages/Dag/Overview/AllDeadlinesModal.tsx  |  85 +++----
 .../pages/DagRuns/BulkClearDagRunsButton.tsx  |  94 ++++----
 .../pages/DagRuns/BulkDeleteDagRunsButton.tsx | 158 +++++++------
 .../pages/DagRuns/BulkMarkDagRunsAsButton.tsx |  87 ++++----
 .../DagsList/PartitionScheduleModal.test.tsx  |  48 ++--
 .../pages/DagsList/PartitionScheduleModal.tsx |  51 +++--
 .../Dashboard/Stats/DagImportErrorsModal.tsx  | 142 ++++++------
 .../Stats/PluginImportErrorsModal.tsx         | 128 +++++------
 .../ui/src/pages/Pools/AddPoolButton.tsx      |  32 +--
 .../ui/src/pages/Pools/EditPoolButton.tsx     |  32 +--
 .../ui/src/pages/Run/DeadlineStatusModal.tsx  | 200 ++++++++---------
 .../ui/src/pages/TaskInstance/Logs/Logs.tsx   |  42 ++--
 .../BulkClearTaskInstancesButton.tsx          | 147 ++++++-------
 .../BulkDeleteTaskInstancesButton.tsx         | 161 +++++++-------
 .../BulkMarkTaskInstancesAsButton.tsx         | 153 +++++++------
 .../TaskStateStore/TaskStateStoreModal.tsx    | 207 +++++++++---------
 .../pages/Variables/DeleteVariablesButton.tsx |  91 ++++----
 .../pages/Variables/ImportVariablesButton.tsx |  22 +-
 .../ManageVariable/AddVariableButton.tsx      |  32 +--
 .../ManageVariable/DeleteVariableButton.tsx   |  70 +++---
 .../ManageVariable/EditVariableButton.tsx     |  32 +--
 .../airflow/ui/src/pages/XCom/XComModal.tsx   |  79 ++++---
 airflow-core/src/airflow/ui/src/theme.ts      |  32 ++-
 .../src/airflow/ui/src/utils/TrimText.tsx     |  88 ++++----
 56 files changed, 2392 insertions(+), 2319 deletions(-)
 create mode 100644 airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.test.tsx
 create mode 100644 airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.tsx
 create mode 100644 airflow-core/src/airflow/ui/src/components/ui/Modal/index.ts

diff --git a/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx b/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx
index 7be08d27af4bf..9f680efe65f4d 100644
--- a/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
@@ -26,7 +26,7 @@ import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { getRunOnLatestVersionState } from "src/components/Clear/TaskInstance/runOnLatestVersion";
 import { useRerunWithLatestVersion } from "src/components/Clear/useRerunWithLatestVersion";
-import { Checkbox, Dialog } from "src/components/ui";
+import { Checkbox, Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { useClearRunDefaultOptions } from "src/hooks/useUserSettings";
 import { useClearDagRunDryRun } from "src/queries/useClearDagRunDryRun";
@@ -108,7 +108,44 @@ const ClearRunDialog = ({ dagRun, onClose, open }: Props) => {
   const shouldShowBundleVersionOption = shouldShowRunOnLatestOption && !onlyNew;
 
   return (
-    <Dialog.Root
+    <Modal
+      footerActions={
+        <>
+          <Button
+            disabled={affectedTasks.total_entries === 0}
+            loading={isPending}
+            onClick={() => {
+              mutate({
+                dagId,
+                dagRunId,
+                requestBody: {
+                  dry_run: false,
+                  note: note === dagRun.note ? undefined : note,
+                  only_failed: onlyFailed,
+                  only_new: onlyNew,
+                  run_on_latest_version: runOnLatestVersion,
+                },
+              });
+            }}
+          >
+            <CgRedo /> {translate("modal.confirm")}
+          </Button>
+          {shouldShowBundleVersionOption ? (
+            <Checkbox
+              checked={runOnLatestVersionForced || runOnLatestVersion}
+              disabled={runOnLatestVersionForced}
+              onCheckedChange={(event) => setRunOnLatestVersion(Boolean(event.checked))}
+              title={
+                runOnLatestVersionForced
+                  ? translate("dags:runAndTaskActions.options.runOnLatestVersionForced")
+                  : undefined
+              }
+            >
+              {translate("dags:runAndTaskActions.options.runOnLatestVersion")}
+            </Checkbox>
+          ) : undefined}
+        </>
+      }
       lazyMount
       onOpenChange={(details) => {
         if (!details.open) {
@@ -116,85 +153,37 @@ const ClearRunDialog = ({ dagRun, onClose, open }: Props) => {
         }
       }}
       open={open}
+      title={
+        <>
+          <strong>
+            {translate("dags:runAndTaskActions.clear.title", { type: translate("dagRun_one") })}:{" "}
+          </strong>{" "}
+          {dagRunId}
+        </>
+      }
     >
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <VStack align="start" gap={4}>
-            <Heading size="xl">
-              <strong>
-                {translate("dags:runAndTaskActions.clear.title", { type: translate("dagRun_one") })}:{" "}
-              </strong>{" "}
-              {dagRunId}
-            </Heading>
-          </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body width="full">
-          <Flex justifyContent="center">
-            <SegmentedControl
-              defaultValues={clearRunDefaultOptions}
-              onChange={setSelectedOptions}
-              options={[
-                {
-                  label: translate("dags:runAndTaskActions.options.existingTasks"),
-                  value: "existingTasks",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.onlyFailed"),
-                  value: "onlyFailed",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.queueNew"),
-                  value: "newTasks",
-                },
-              ]}
-            />
-          </Flex>
-          <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
-          <Flex
-            {...(shouldShowBundleVersionOption ? { alignItems: "center" } : {})}
-            justifyContent={shouldShowBundleVersionOption ? "space-between" : "end"}
-            mt={3}
-          >
-            {shouldShowBundleVersionOption ? (
-              <Checkbox
-                checked={runOnLatestVersionForced || runOnLatestVersion}
-                disabled={runOnLatestVersionForced}
-                onCheckedChange={(event) => setRunOnLatestVersion(Boolean(event.checked))}
-                title={
-                  runOnLatestVersionForced
-                    ? translate("dags:runAndTaskActions.options.runOnLatestVersionForced")
-                    : undefined
-                }
-              >
-                {translate("dags:runAndTaskActions.options.runOnLatestVersion")}
-              </Checkbox>
-            ) : undefined}
-            <Button
-              disabled={affectedTasks.total_entries === 0}
-              loading={isPending}
-              onClick={() => {
-                mutate({
-                  dagId,
-                  dagRunId,
-                  requestBody: {
-                    dry_run: false,
-                    note: note === dagRun.note ? undefined : note,
-                    only_failed: onlyFailed,
-                    only_new: onlyNew,
-                    run_on_latest_version: runOnLatestVersion,
-                  },
-                });
-              }}
-            >
-              <CgRedo /> {translate("modal.confirm")}
-            </Button>
-          </Flex>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+      <Flex justifyContent="center">
+        <SegmentedControl
+          defaultValues={clearRunDefaultOptions}
+          onChange={setSelectedOptions}
+          options={[
+            {
+              label: translate("dags:runAndTaskActions.options.existingTasks"),
+              value: "existingTasks",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.onlyFailed"),
+              value: "onlyFailed",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.queueNew"),
+              value: "newTasks",
+            },
+          ]}
+        />
+      </Flex>
+      <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx
index aec9bd55c6656..55f97b5d11718 100644
--- a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
@@ -30,7 +30,7 @@ import {
 import type { LightGridTaskInstanceSummary, TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { useRerunWithLatestVersion } from "src/components/Clear/useRerunWithLatestVersion";
-import { Checkbox, Dialog } from "src/components/ui";
+import { Checkbox, Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { useClearTaskInstanceDefaultOptions } from "src/hooks/useUserSettings";
 import { useClearTaskInstances } from "src/queries/useClearTaskInstances";
@@ -135,101 +135,90 @@ export const ClearGroupTaskInstanceDialog = ({ onClose, open, taskInstance }: Pr
   };
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={open}>
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <VStack align="start" gap={4}>
-            <Heading size="xl">
-              <strong>
-                {translate("dags:runAndTaskActions.clear.title", {
-                  type: translate("taskInstance", { count: affectedTasks.total_entries ?? 0 }),
-                })}
-                :
-              </strong>{" "}
-              {groupId}
-            </Heading>
-          </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body width="full">
-          <Flex justifyContent="center">
-            <SegmentedControl
-              defaultValues={clearTaskInstanceDefaultOptions}
-              multiple
-              onChange={setSelectedOptions}
-              options={[
-                {
-                  label: translate("dags:runAndTaskActions.options.past"),
-                  value: "past",
+    <Modal
+      footerActions={
+        <>
+          <Button
+            disabled={affectedTasks.total_entries === 0 || groupTaskIds.length === 0}
+            loading={isPending}
+            onClick={() => {
+              mutate({
+                dagId,
+                requestBody: {
+                  dag_run_id: runId,
+                  dry_run: false,
+                  include_downstream: downstream,
+                  include_future: future,
+                  include_past: past,
+                  include_upstream: upstream,
+                  ...(note === null ? {} : { note }),
+                  only_failed: onlyFailed,
+                  run_on_latest_version: runOnLatestVersion,
+                  task_ids: groupTaskIds,
                 },
-                {
-                  label: translate("dags:runAndTaskActions.options.future"),
-                  value: "future",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.upstream"),
-                  value: "upstream",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.downstream"),
-                  value: "downstream",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.onlyFailed"),
-                  value: "onlyFailed",
-                },
-              ]}
-            />
-          </Flex>
-          <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
-          <Flex
-            {...(shouldShowRunOnLatestOption ? { alignItems: "center" } : {})}
-            gap={3}
-            justifyContent={shouldShowRunOnLatestOption ? "space-between" : "end"}
-            mt={3}
+              });
+            }}
           >
-            {shouldShowRunOnLatestOption ? (
-              <Checkbox
-                checked={runOnLatestVersionForced || runOnLatestVersion}
-                disabled={runOnLatestVersionForced}
-                onCheckedChange={(event) => setRunOnLatestVersion(Boolean(event.checked))}
-                title={
-                  runOnLatestVersionForced
-                    ? translate("dags:runAndTaskActions.options.runOnLatestVersionForced")
-                    : undefined
-                }
-              >
-                {translate("dags:runAndTaskActions.options.runOnLatestVersion")}
-              </Checkbox>
-            ) : undefined}
-            <Button
-              disabled={affectedTasks.total_entries === 0 || groupTaskIds.length === 0}
-              loading={isPending}
-              onClick={() => {
-                mutate({
-                  dagId,
-                  requestBody: {
-                    dag_run_id: runId,
-                    dry_run: false,
-                    include_downstream: downstream,
-                    include_future: future,
-                    include_past: past,
-                    include_upstream: upstream,
-                    ...(note === null ? {} : { note }),
-                    only_failed: onlyFailed,
-                    run_on_latest_version: runOnLatestVersion,
-                    task_ids: groupTaskIds,
-                  },
-                });
-              }}
+            <CgRedo /> {translate("modal.confirm")}
+          </Button>
+          {shouldShowRunOnLatestOption ? (
+            <Checkbox
+              checked={runOnLatestVersionForced || runOnLatestVersion}
+              disabled={runOnLatestVersionForced}
+              onCheckedChange={(event) => setRunOnLatestVersion(Boolean(event.checked))}
+              title={
+                runOnLatestVersionForced
+                  ? translate("dags:runAndTaskActions.options.runOnLatestVersionForced")
+                  : undefined
+              }
             >
-              <CgRedo /> {translate("modal.confirm")}
-            </Button>
-          </Flex>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+              {translate("dags:runAndTaskActions.options.runOnLatestVersion")}
+            </Checkbox>
+          ) : undefined}
+        </>
+      }
+      lazyMount
+      onOpenChange={onClose}
+      open={open}
+      title={
+        <>
+          {translate("dags:runAndTaskActions.clear.title", {
+            type: translate("taskInstance", { count: affectedTasks.total_entries ?? 0 }),
+          })}
+          : {groupId}
+        </>
+      }
+    >
+      <Flex justifyContent="center">
+        <SegmentedControl
+          defaultValues={clearTaskInstanceDefaultOptions}
+          multiple
+          onChange={setSelectedOptions}
+          options={[
+            {
+              label: translate("dags:runAndTaskActions.options.past"),
+              value: "past",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.future"),
+              value: "future",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.upstream"),
+              value: "upstream",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.downstream"),
+              value: "downstream",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.onlyFailed"),
+              value: "onlyFailed",
+            },
+          ]}
+        />
+      </Flex>
+      <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx
index 074e3f2d40ae4..feeeb98e7483d 100644
--- a/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, Flex, useDisclosure } from "@chakra-ui/react";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
@@ -27,7 +27,7 @@ import { ActionAccordion } from "src/components/ActionAccordion";
 import { taskInstanceKey } from "src/components/ActionAccordion/columns";
 import { useRerunWithLatestVersion } from "src/components/Clear/useRerunWithLatestVersion";
 import Time from "src/components/Time";
-import { Checkbox, Dialog } from "src/components/ui";
+import { Checkbox, Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import {
   useClearPreventRunningTaskDefault,
@@ -198,108 +198,100 @@ const ClearTaskInstanceDialog = (props: Props) => {
 
   return (
     <>
-      <Dialog.Root lazyMount onOpenChange={onCloseDialog} open={openDialog ? !open : false}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                <strong>
-                  {allMapped
-                    ? translate("dags:runAndTaskActions.clearAllMapped.title")
-                    : translate("dags:runAndTaskActions.clear.title", {
-                        type: translate("taskInstance_one"),
-                      })}
-                  :
-                </strong>{" "}
-                {allMapped ? (
-                  taskId
-                ) : (
-                  <>
-                    {taskInstance?.task_display_name} <Time datetime={taskInstance?.start_date} />
-                  </>
-                )}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body width="full">
-            <Flex justifyContent="center">
-              <SegmentedControl
-                defaultValues={clearTaskInstanceDefaultOptions}
-                multiple
-                onChange={setSelectedOptions}
-                options={[
-                  {
-                    disabled: allMapped || taskInstance?.logical_date === null,
-                    label: translate("dags:runAndTaskActions.options.past"),
-                    value: "past",
-                  },
-                  {
-                    disabled: allMapped || taskInstance?.logical_date === null,
-                    label: translate("dags:runAndTaskActions.options.future"),
-                    value: "future",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.upstream"),
-                    value: "upstream",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.downstream"),
-                    value: "downstream",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.onlyFailed"),
-                    value: "onlyFailed",
-                  },
-                ]}
-              />
-            </Flex>
-            <ActionAccordion
-              affectedTasks={affectedTasks}
-              note={note}
-              selection={{ excludedKeys, onToggle: toggleTask }}
-              setNote={setNote}
-            />
-            <Flex
-              {...(shouldShowRunOnLatestOption ? { alignItems: "center" } : {})}
-              gap={3}
-              justifyContent={shouldShowRunOnLatestOption ? "space-between" : "end"}
-              mt={3}
+      <Modal
+        footerActions={
+          <>
+            <Button
+              disabled={affectedTasks.total_entries === 0 || checkedTaskIds?.length === 0}
+              loading={isPending}
+              onClick={onOpen}
+            >
+              <CgRedo /> {translate("modal.confirm")}
+            </Button>
+            <Checkbox
+              checked={preventRunningTask}
+              onCheckedChange={(event) => setPreventRunningTask(Boolean(event.checked))}
+              style={{ marginRight: "auto" }}
             >
-              {shouldShowRunOnLatestOption ? (
-                <Checkbox
-                  checked={runOnLatestVersionForced || runOnLatestVersion}
-                  disabled={runOnLatestVersionForced}
-                  onCheckedChange={(event) => setRunOnLatestVersion(Boolean(event.checked))}
-                  title={
-                    runOnLatestVersionForced
-                      ? translate("dags:runAndTaskActions.options.runOnLatestVersionForced")
-                      : undefined
-                  }
-                >
-                  {translate("dags:runAndTaskActions.options.runOnLatestVersion")}
-                </Checkbox>
-              ) : undefined}
+              {translate("dags:runAndTaskActions.options.preventRunningTasks")}
+            </Checkbox>
+            {shouldShowRunOnLatestOption ? (
               <Checkbox
-                checked={preventRunningTask}
-                onCheckedChange={(event) => setPreventRunningTask(Boolean(event.checked))}
-                style={{ marginRight: "auto" }}
+                checked={runOnLatestVersionForced || runOnLatestVersion}
+                disabled={runOnLatestVersionForced}
+                onCheckedChange={(event) => setRunOnLatestVersion(Boolean(event.checked))}
+                title={
+                  runOnLatestVersionForced
+                    ? translate("dags:runAndTaskActions.options.runOnLatestVersionForced")
+                    : undefined
+                }
               >
-                {translate("dags:runAndTaskActions.options.preventRunningTasks")}
+                {translate("dags:runAndTaskActions.options.runOnLatestVersion")}
               </Checkbox>
-              <Button
-                disabled={affectedTasks.total_entries === 0 || checkedTaskIds?.length === 0}
-                loading={isPending}
-                onClick={onOpen}
-              >
-                <CgRedo /> {translate("modal.confirm")}
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+            ) : undefined}
+          </>
+        }
+        lazyMount
+        onOpenChange={onCloseDialog}
+        open={openDialog ? !open : false}
+        title={
+          <>
+            <strong>
+              {allMapped
+                ? translate("dags:runAndTaskActions.clearAllMapped.title")
+                : translate("dags:runAndTaskActions.clear.title", {
+                    type: translate("taskInstance_one"),
+                  })}
+              :
+            </strong>{" "}
+            {allMapped ? (
+              taskId
+            ) : (
+              <>
+                {taskInstance?.task_display_name} <Time datetime={taskInstance?.start_date} />
+              </>
+            )}
+          </>
+        }
+      >
+        <Flex justifyContent="center">
+          <SegmentedControl
+            defaultValues={clearTaskInstanceDefaultOptions}
+            multiple
+            onChange={setSelectedOptions}
+            options={[
+              {
+                disabled: allMapped || taskInstance?.logical_date === null,
+                label: translate("dags:runAndTaskActions.options.past"),
+                value: "past",
+              },
+              {
+                disabled: allMapped || taskInstance?.logical_date === null,
+                label: translate("dags:runAndTaskActions.options.future"),
+                value: "future",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.upstream"),
+                value: "upstream",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.downstream"),
+                value: "downstream",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.onlyFailed"),
+                value: "onlyFailed",
+              },
+            ]}
+          />
+        </Flex>
+        <ActionAccordion
+          affectedTasks={affectedTasks}
+          note={note}
+          selection={{ excludedKeys, onToggle: toggleTask }}
+          setNote={setNote}
+        />
+      </Modal>
       {open ? (
         <ClearTaskInstanceConfirmationDialog
           dagDetails={{
diff --git a/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx b/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
index f862929fbcc95..ec76bc265946a 100644
--- a/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
@@ -16,10 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, type DialogBodyProps, Heading } from "@chakra-ui/react";
+import { Button, type DialogBodyProps } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 
 type Props = {
   readonly children?: DialogBodyProps["children"];
@@ -33,42 +33,25 @@ export const ConfirmationModal = ({ children, header, onConfirm, onOpenChange, o
   const { t: translate } = useTranslation("common");
 
   return (
-    <Dialog.Root
+    <Modal
+      cancelActionProps={{ "data-testid": "confirmation-cancel-button" }}
       data-testid="confirmation-modal"
-      lazyMount
+      footerActions={
+        <Button
+          data-testid="confirmation-confirm-button"
+          onClick={() => {
+            onConfirm();
+            onOpenChange({ open });
+          }}
+        >
+          {translate("modal.confirm")}
+        </Button>
+      }
       onOpenChange={onOpenChange}
       open={open}
-      unmountOnExit
+      title={header}
     >
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <Heading>{header}</Heading>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body>{children}</Dialog.Body>
-        <Dialog.Footer>
-          <Dialog.ActionTrigger asChild>
-            <Button
-              data-testid="confirmation-cancel-button"
-              onClick={() => onOpenChange({ open })}
-              variant="outline"
-            >
-              {translate("modal.cancel")}
-            </Button>
-          </Dialog.ActionTrigger>
-          <Button
-            data-testid="confirmation-confirm-button"
-            onClick={() => {
-              onConfirm();
-              onOpenChange({ open });
-            }}
-          >
-            {translate("modal.confirm")}
-          </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog.Root>
+      {children}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx b/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx
index e5f383fcdede5..169ec2bdbdbff 100644
--- a/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx
@@ -21,7 +21,7 @@ import { useTranslation } from "react-i18next";
 import { LuFileWarning } from "react-icons/lu";
 
 import type { DAGWarningResponse } from "openapi/requests/types.gen";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 
 import { ErrorAlert } from "./ErrorAlert";
 import { WarningAlert } from "./WarningAlert";
@@ -44,32 +44,32 @@ export const DAGWarningsModal = ({ error, onClose, open, warnings }: ImportDAGEr
     : "";
 
   return (
-    <Dialog.Root data-testid="dag-warnings-modal" onOpenChange={onClose} open={open} scrollBehavior="inside">
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <HStack fontSize="xl">
+    <Modal
+      data-testid="dag-warnings-modal"
+      headerProps={{
+        children: (
+          <HStack gap={2}>
             <LuFileWarning />
-            <Heading>{heading}</Heading>
+            <Heading fontSize="lg">{heading}</Heading>
           </HStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body>
-          {Boolean(error) && (
-            <VStack>
-              <ErrorAlert error={error} />
-              <Spacer />
-            </VStack>
-          )}
-          {warnings?.map((warning) => (
-            <VStack key={warning.message}>
-              <WarningAlert warning={warning} />
-              <Spacer />
-            </VStack>
-          ))}
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+        ),
+      }}
+      onOpenChange={onClose}
+      open={open}
+      scrollBehavior="inside"
+    >
+      {Boolean(error) && (
+        <VStack>
+          <ErrorAlert error={error} />
+          <Spacer />
+        </VStack>
+      )}
+      {warnings?.map((warning) => (
+        <VStack key={warning.message}>
+          <WarningAlert warning={warning} />
+          <Spacer />
+        </VStack>
+      ))}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx b/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
index 0652296f5e751..ad7b1e26fa765 100644
--- a/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Heading, HStack, Text } from "@chakra-ui/react";
+import { Button, Text } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 
 type DeleteDialogProps = {
   readonly deleteButtonText?: string;
@@ -46,36 +46,29 @@ const DeleteDialog = ({
   const { t: translate } = useTranslation("common");
 
   return (
-    <Dialog.Root data-testid="delete-dialog" lazyMount onOpenChange={onClose} open={open} unmountOnExit>
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <Heading size="lg">{title}</Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <Text>{translate("modal.delete.confirmation", { resourceName })}</Text>
-          <Text color="fg.error" fontWeight="bold" mt={4}>
-            {warningText}
-          </Text>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <HStack justifyContent="flex-end" width="100%">
-            <Button data-testid="delete-cancel-button" onClick={onClose} variant="outline">
-              {translate("modal.cancel")}
-            </Button>
-            <Button
-              colorPalette="danger"
-              data-testid="delete-confirm-button"
-              loading={isDeleting}
-              onClick={onDelete}
-            >
-              <FiTrash2 style={{ marginRight: "8px" }} />{" "}
-              {deleteButtonText ?? translate("modal.delete.button")}
-            </Button>
-          </HStack>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal
+      cancelActionProps={{ "data-testid": "delete-cancel-button" }}
+      data-testid="delete-dialog"
+      footerActions={
+        <Button
+          colorPalette="danger"
+          data-testid="delete-confirm-button"
+          loading={isDeleting}
+          onClick={onDelete}
+        >
+          <FiTrash2 />
+          {deleteButtonText ?? translate("modal.delete.button")}
+        </Button>
+      }
+      onOpenChange={onClose}
+      open={open}
+      title={title}
+    >
+      <Text>{translate("modal.delete.confirmation", { resourceName })}</Text>
+      <Text color="fg.error" fontWeight="bold" mt={4}>
+        {warningText}
+      </Text>
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
index 0724adfa35197..feceacae88e7b 100644
--- a/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, VStack } from "@chakra-ui/react";
+import { Heading, VStack } from "@chakra-ui/react";
 import { type ReactElement, useState } from "react";
 
-import { IconButton, Dialog } from "src/components/ui";
-import { ResizableWrapper, MARKDOWN_DIALOG_STORAGE_KEY } from "src/components/ui/ResizableWrapper";
+import { Dialog, IconButton } from "src/components/ui";
+import { MARKDOWN_DIALOG_STORAGE_KEY, ResizableWrapper } from "src/components/ui/ResizableWrapper";
 
 import ReactMarkdown from "./ReactMarkdown";
 
@@ -38,7 +38,7 @@ const DisplayMarkdownButton = ({
   const [isDocsOpen, setIsDocsOpen] = useState(false);
 
   return (
-    <Box>
+    <div>
       <IconButton data-testid="markdown-button" label={text} onClick={() => setIsDocsOpen(true)}>
         {icon}
       </IconButton>
@@ -50,7 +50,7 @@ const DisplayMarkdownButton = ({
       >
         <Dialog.Content backdrop maxHeight="none" maxWidth="none" padding={0} width="auto">
           <ResizableWrapper storageKey={MARKDOWN_DIALOG_STORAGE_KEY}>
-            <Dialog.Header bg="brand.muted" flexShrink={0}>
+            <Dialog.Header alignItems="center" flexShrink={0} justifyContent="space-between">
               <Heading size="xl">{header}</Heading>
               <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
             </Dialog.Header>
@@ -60,7 +60,7 @@ const DisplayMarkdownButton = ({
           </ResizableWrapper>
         </Dialog.Content>
       </Dialog.Root>
-    </Box>
+    </div>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/HITLReview/HITLReviewModal.tsx b/airflow-core/src/airflow/ui/src/components/HITLReview/HITLReviewModal.tsx
index 6da3e60f71d48..aa111315186ad 100644
--- a/airflow-core/src/airflow/ui/src/components/HITLReview/HITLReviewModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/HITLReview/HITLReviewModal.tsx
@@ -24,7 +24,7 @@ import { FiInfo } from "react-icons/fi";
 
 import type { HITLDetail } from "openapi/requests/types.gen.ts";
 import { HITLReviewDetail } from "src/components/HITLReview/HITLReviewDetail.tsx";
-import { Tooltip } from "src/components/ui";
+import { Modal, Tooltip } from "src/components/ui";
 import { ButtonGroupToggle } from "src/components/ui/ButtonGroupToggle";
 import { Dialog } from "src/components/ui/Dialog";
 
@@ -78,19 +78,10 @@ export const HITLReviewModal = ({
   };
 
   return (
-    <Dialog.Root
-      lazyMount
-      onOpenChange={(event) => {
-        if (!event.open) {
-          handleClose();
-        }
-      }}
-      open={open}
-      scrollBehavior="inside"
-      unmountOnExit
-    >
-      <Dialog.Content maxW="1440px" p={4}>
-        <Dialog.Header>
+    <Modal
+      contentProps={{ maxW: "1440px", padding: 4 }}
+      headerProps={{
+        children: (
           <HStack justifyContent="space-between" overflowX="auto" width="100%">
             <HStack flexShrink={0} gap={1}>
               <Dialog.Title>{translate("requiredAction_other")}</Dialog.Title>
@@ -114,42 +105,49 @@ export const HITLReviewModal = ({
               ) : undefined}
             </HStack>
           </HStack>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <HStack alignItems="stretch" flexDirection={{ base: "column", lg: "row" }} gap={6}>
-            <Box flex="2">
-              <VStack alignItems="stretch" gap={4}>
-                <HITLReviewListSection
-                  details={pendingHitl.data}
-                  heading={translate("review.list.pendingRequiredActions", {
-                    count: pendingHitl.total ?? pendingHitl.data.length,
-                  })}
-                  isError={pendingHitl.isError}
-                  isLoading={pendingHitl.isLoading}
-                  onSelect={onSelect}
-                  selectedDetail={selectedDetail}
-                />
-                {shouldShowCompletedHitl && selectedFilter === HITLReviewFilterMode.ALL ? (
-                  <HITLReviewListSection
-                    details={completedHitl.data}
-                    heading={translate("review.list.completedRequiredActions", {
-                      count: completedHitl.total ?? completedHitl.data.length,
-                    })}
-                    isError={completedHitl.isError}
-                    isLoading={completedHitl.isLoading}
-                    onSelect={onSelect}
-                    selectedDetail={selectedDetail}
-                  />
-                ) : null}
-              </VStack>
-            </Box>
-            <Box borderRadius="md" borderWidth={1} flex="1" mt={8} p={3}>
-              <HITLReviewDetail detail={selectedDetail} onOpenTask={handleClose} onResponded={onNext} />
-            </Box>
-          </HStack>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+        ),
+      }}
+      lazyMount
+      onOpenChange={(event) => {
+        if (!event.open) {
+          handleClose();
+        }
+      }}
+      open={open}
+      scrollBehavior="inside"
+      unmountOnExit
+    >
+      <HStack alignItems="stretch" flexDirection={{ base: "column", lg: "row" }} gap={6}>
+        <Box flex="2">
+          <VStack alignItems="stretch" gap={4}>
+            <HITLReviewListSection
+              details={pendingHitl.data}
+              heading={translate("review.list.pendingRequiredActions", {
+                count: pendingHitl.total ?? pendingHitl.data.length,
+              })}
+              isError={pendingHitl.isError}
+              isLoading={pendingHitl.isLoading}
+              onSelect={onSelect}
+              selectedDetail={selectedDetail}
+            />
+            {shouldShowCompletedHitl && selectedFilter === HITLReviewFilterMode.ALL ? (
+              <HITLReviewListSection
+                details={completedHitl.data}
+                heading={translate("review.list.completedRequiredActions", {
+                  count: completedHitl.total ?? completedHitl.data.length,
+                })}
+                isError={completedHitl.isError}
+                isLoading={completedHitl.isLoading}
+                onSelect={onSelect}
+                selectedDetail={selectedDetail}
+              />
+            ) : null}
+          </VStack>
+        </Box>
+        <Box borderRadius="md" borderWidth={1} flex="1" mt={8} p={3}>
+          <HITLReviewDetail detail={selectedDetail} onOpenTask={handleClose} onResponded={onNext} />
+        </Box>
+      </HStack>
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/components/KeyboardShortcuts/KeyboardShortcutsModal.tsx b/airflow-core/src/airflow/ui/src/components/KeyboardShortcuts/KeyboardShortcutsModal.tsx
index 6ff477c626c30..dd5c1b5880af3 100644
--- a/airflow-core/src/airflow/ui/src/components/KeyboardShortcuts/KeyboardShortcutsModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/KeyboardShortcuts/KeyboardShortcutsModal.tsx
@@ -20,10 +20,10 @@ import { Box, Flex, HStack, Heading, Kbd, Text, VStack } from "@chakra-ui/react"
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import {
-  SHORTCUT_CATEGORIES,
   SHORTCUTS,
+  SHORTCUT_CATEGORIES,
   type ShortcutEntry,
   useShortcutRegistry,
 } from "src/context/keyboardShortcuts";
@@ -67,40 +67,40 @@ export const KeyboardShortcutsModal = () => {
   const groups = buildGroups(shortcuts);
 
   return (
-    <Dialog.Root lazyMount onOpenChange={(event) => setOpen(event.open)} open={open} size="md">
-      <Dialog.Content backdrop>
-        <Dialog.Header>{translate("shortcuts.title")}</Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          {groups.length === 0 ? (
-            <Text color="fg.muted">{translate("shortcuts.empty")}</Text>
-          ) : (
-            <VStack align="stretch" gap={4}>
-              {groups.map(({ category, items }) => (
-                <Box key={category}>
-                  <Heading color="fg.muted" mb={2} size="xs" textTransform="uppercase">
-                    {translate(`shortcuts.categories.${category}`)}
-                  </Heading>
-                  <VStack align="stretch" gap={1}>
-                    {items.map((entry) => (
-                      <Flex alignItems="center" gap={4} justifyContent="space-between" key={entry.id}>
-                        <Text fontSize="sm">{entry.description}</Text>
-                        <HStack gap={1}>
-                          {entry.keys.map((combo) => (
-                            <Kbd key={combo} size="sm">
-                              {formatShortcutCombo(combo, metaKey)}
-                            </Kbd>
-                          ))}
-                        </HStack>
-                      </Flex>
-                    ))}
-                  </VStack>
-                </Box>
-              ))}
-            </VStack>
-          )}
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal
+      lazyMount
+      onOpenChange={(event) => setOpen(event.open)}
+      open={open}
+      size="md"
+      title={translate("shortcuts.title")}
+    >
+      {groups.length === 0 ? (
+        <Text color="fg.muted">{translate("shortcuts.empty")}</Text>
+      ) : (
+        <VStack align="stretch" gap={4}>
+          {groups.map(({ category, items }) => (
+            <Box key={category}>
+              <Heading color="fg.muted" mb={2} size="xs" textTransform="uppercase">
+                {translate(`shortcuts.categories.${category}`)}
+              </Heading>
+              <VStack align="stretch" gap={1}>
+                {items.map((entry) => (
+                  <Flex alignItems="center" gap={4} justifyContent="space-between" key={entry.id}>
+                    <Text fontSize="sm">{entry.description}</Text>
+                    <HStack gap={1}>
+                      {entry.keys.map((combo) => (
+                        <Kbd key={combo} size="sm">
+                          {formatShortcutCombo(combo, metaKey)}
+                        </Kbd>
+                      ))}
+                    </HStack>
+                  </Flex>
+                ))}
+              </VStack>
+            </Box>
+          ))}
+        </VStack>
+      )}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx
index 8a0112a2d9f16..b1f463690403d 100644
--- a/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx
@@ -16,14 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { DagRunMutableStates, DAGRunResponse } from "openapi/requests/types.gen";
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { StateBadge } from "src/components/StateBadge";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { usePatchDagRun } from "src/queries/usePatchDagRun";
 
 type Props = {
@@ -53,7 +53,22 @@ const MarkRunAsDialog = ({ dagRun, onClose, open, state }: Props) => {
   const { isPending, mutate } = usePatchDagRun({ dagId, dagRunId, onSuccess: handleClose });
 
   return (
-    <Dialog.Root
+    <Modal
+      footerActions={
+        <Button
+          data-testid="mark-run-as-confirm"
+          loading={isPending}
+          onClick={() => {
+            mutate({
+              dagId,
+              dagRunId,
+              requestBody: { note, state },
+            });
+          }}
+        >
+          {translate("modal.confirm")}
+        </Button>
+      }
       lazyMount
       onOpenChange={(details) => {
         if (!details.open) {
@@ -61,42 +76,18 @@ const MarkRunAsDialog = ({ dagRun, onClose, open, state }: Props) => {
         }
       }}
       open={open}
+      title={
+        <>
+          {translate("dags:runAndTaskActions.markAs.title", {
+            state,
+            type: translate("dagRun_one"),
+          })}
+          : {dagRunId} <StateBadge state={state} />
+        </>
+      }
     >
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <VStack align="start" gap={4}>
-            <Heading size="xl">
-              {translate("dags:runAndTaskActions.markAs.title", {
-                state,
-                type: translate("dagRun_one"),
-              })}
-              : {dagRunId} <StateBadge state={state} />
-            </Heading>
-          </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body width="full">
-          <ActionAccordion note={note} setNote={setNote} />
-          <Flex justifyContent="end" mt={3}>
-            <Button
-              data-testid="mark-run-as-confirm"
-              loading={isPending}
-              onClick={() => {
-                mutate({
-                  dagId,
-                  dagRunId,
-                  requestBody: { note, state },
-                });
-              }}
-            >
-              {translate("modal.confirm")}
-            </Button>
-          </Flex>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+      <ActionAccordion note={note} setNote={setNote} />
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx
index fbaeefcb1bb89..f2c0b5626479d 100644
--- a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskGroup/MarkTaskGroupAsDialog.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
@@ -25,7 +25,7 @@ import type { LightGridTaskInstanceSummary, TaskInstanceState } from "openapi/re
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { usePatchTaskGroup } from "src/queries/usePatchTaskGroup";
 import { usePatchTaskGroupDryRun } from "src/queries/usePatchTaskGroupDryRun";
@@ -92,7 +92,29 @@ const MarkTaskGroupAsDialog = ({ groupTaskInstance, onClose, open, state }: Prop
   };
 
   return (
-    <Dialog.Root
+    <Modal
+      footerActions={
+        <Button
+          loading={isPending || isPendingDryRun}
+          onClick={() => {
+            mutate({
+              dagId,
+              dagRunId: runId,
+              groupId,
+              requestBody: {
+                include_downstream: downstream,
+                include_future: future,
+                include_past: past,
+                include_upstream: upstream,
+                new_state: state,
+                note,
+              },
+            });
+          }}
+        >
+          {translate("modal.confirm")}
+        </Button>
+      }
       lazyMount
       onOpenChange={(details) => {
         if (!details.open) {
@@ -100,78 +122,47 @@ const MarkTaskGroupAsDialog = ({ groupTaskInstance, onClose, open, state }: Prop
         }
       }}
       open={open}
+      title={
+        <>
+          <strong>
+            {translate("dags:runAndTaskActions.markAs.title", {
+              state,
+              type: translate("taskGroup_one"),
+            })}
+            :
+          </strong>{" "}
+          {groupTaskInstance.task_display_name} <Time datetime={groupTaskInstance.min_start_date} />{" "}
+          <StateBadge state={state} />
+        </>
+      }
     >
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <VStack align="start" gap={4}>
-            <Heading size="xl">
-              <strong>
-                {translate("dags:runAndTaskActions.markAs.title", {
-                  state,
-                  type: translate("taskGroup_one"),
-                })}
-                :
-              </strong>{" "}
-              {groupTaskInstance.task_display_name} <Time datetime={groupTaskInstance.min_start_date} />{" "}
-              <StateBadge state={state} />
-            </Heading>
-          </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body width="full">
-          <Flex justifyContent="center">
-            <SegmentedControl
-              defaultValues={["downstream"]}
-              multiple
-              onChange={setSelectedOptions}
-              options={[
-                {
-                  label: translate("dags:runAndTaskActions.options.past"),
-                  value: "past",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.future"),
-                  value: "future",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.upstream"),
-                  value: "upstream",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.downstream"),
-                  value: "downstream",
-                },
-              ]}
-            />
-          </Flex>
-          <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
-          <Flex justifyContent="end" mt={3}>
-            <Button
-              loading={isPending || isPendingDryRun}
-              onClick={() => {
-                mutate({
-                  dagId,
-                  dagRunId: runId,
-                  groupId,
-                  requestBody: {
-                    include_downstream: downstream,
-                    include_future: future,
-                    include_past: past,
-                    include_upstream: upstream,
-                    new_state: state,
-                    note,
-                  },
-                });
-              }}
-            >
-              {translate("modal.confirm")}
-            </Button>
-          </Flex>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+      <Flex justifyContent="center">
+        <SegmentedControl
+          defaultValues={["downstream"]}
+          multiple
+          onChange={setSelectedOptions}
+          options={[
+            {
+              label: translate("dags:runAndTaskActions.options.past"),
+              value: "past",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.future"),
+              value: "future",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.upstream"),
+              value: "upstream",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.downstream"),
+              value: "downstream",
+            },
+          ]}
+        />
+      </Flex>
+      <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx
index dc1919a54a559..80f56244913d3 100644
--- a/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -24,7 +24,7 @@ import type { TaskInstanceResponse, TaskInstanceState } from "openapi/requests/t
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { useMarkTaskInstanceDefaultOptions } from "src/hooks/useUserSettings";
 import { usePatchTaskInstance } from "src/queries/usePatchTaskInstance";
@@ -97,7 +97,30 @@ const MarkTaskInstanceAsDialog = ({ onClose, open, state, taskInstance }: Props)
   };
 
   return (
-    <Dialog.Root
+    <Modal
+      footerActions={
+        <Button
+          loading={isPending || isPendingDryRun}
+          onClick={() => {
+            mutate({
+              dagId,
+              dagRunId,
+              mapIndex,
+              requestBody: {
+                include_downstream: downstream,
+                include_future: future,
+                include_past: past,
+                include_upstream: upstream,
+                new_state: state,
+                note,
+              },
+              taskId,
+            });
+          }}
+        >
+          {translate("modal.confirm")}
+        </Button>
+      }
       lazyMount
       onOpenChange={(details) => {
         if (!details.open) {
@@ -105,81 +128,46 @@ const MarkTaskInstanceAsDialog = ({ onClose, open, state, taskInstance }: Props)
         }
       }}
       open={open}
+      title={
+        <>
+          {translate("dags:runAndTaskActions.markAs.title", {
+            state,
+            type: translate("taskInstance_one"),
+          })}
+          : {taskInstance.task_display_name} <Time datetime={taskInstance.start_date} />{" "}
+          <StateBadge state={state} />
+        </>
+      }
     >
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <VStack align="start" gap={4}>
-            <Heading size="xl">
-              <strong>
-                {translate("dags:runAndTaskActions.markAs.title", {
-                  state,
-                  type: translate("taskInstance_one"),
-                })}
-                :
-              </strong>{" "}
-              {taskInstance.task_display_name} <Time datetime={taskInstance.start_date} />{" "}
-              <StateBadge state={state} />
-            </Heading>
-          </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body width="full">
-          <Flex justifyContent="center">
-            <SegmentedControl
-              defaultValues={markTaskInstanceDefaultOptions}
-              multiple
-              onChange={setSelectedOptions}
-              options={[
-                {
-                  disabled: taskInstance.logical_date === null,
-                  label: translate("dags:runAndTaskActions.options.past"),
-                  value: "past",
-                },
-                {
-                  disabled: taskInstance.logical_date === null,
-                  label: translate("dags:runAndTaskActions.options.future"),
-                  value: "future",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.upstream"),
-                  value: "upstream",
-                },
-                {
-                  label: translate("dags:runAndTaskActions.options.downstream"),
-                  value: "downstream",
-                },
-              ]}
-            />
-          </Flex>
-          <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
-          <Flex justifyContent="end" mt={3}>
-            <Button
-              loading={isPending || isPendingDryRun}
-              onClick={() => {
-                mutate({
-                  dagId,
-                  dagRunId,
-                  mapIndex,
-                  requestBody: {
-                    include_downstream: downstream,
-                    include_future: future,
-                    include_past: past,
-                    include_upstream: upstream,
-                    new_state: state,
-                    note,
-                  },
-                  taskId,
-                });
-              }}
-            >
-              {translate("modal.confirm")}
-            </Button>
-          </Flex>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+      <Flex justifyContent="center">
+        <SegmentedControl
+          defaultValues={markTaskInstanceDefaultOptions}
+          multiple
+          onChange={setSelectedOptions}
+          options={[
+            {
+              disabled: taskInstance.logical_date === null,
+              label: translate("dags:runAndTaskActions.options.past"),
+              value: "past",
+            },
+            {
+              disabled: taskInstance.logical_date === null,
+              label: translate("dags:runAndTaskActions.options.future"),
+              value: "future",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.upstream"),
+              value: "upstream",
+            },
+            {
+              label: translate("dags:runAndTaskActions.options.downstream"),
+              value: "downstream",
+            },
+          ]}
+        />
+      </Flex>
+      <ActionAccordion affectedTasks={affectedTasks} note={note} setNote={setNote} />
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/MarkdownModal.tsx b/airflow-core/src/airflow/ui/src/components/MarkdownModal.tsx
index 80288a37d3fa4..7078d3dce5f28 100644
--- a/airflow-core/src/airflow/ui/src/components/MarkdownModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/MarkdownModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, Flex, Heading, HStack, Text, Textarea, VStack } from "@chakra-ui/react";
+import { Box, Button, Flex, HStack, Text, Textarea, VStack } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -25,7 +25,7 @@ import { FiEdit, FiEye } from "react-icons/fi";
 import NoteIcon from "src/components/NoteIcon";
 import ReactMarkdown from "src/components/ReactMarkdown";
 import { Dialog } from "src/components/ui";
-import { ResizableWrapper, MARKDOWN_DIALOG_STORAGE_KEY } from "src/components/ui/ResizableWrapper";
+import { MARKDOWN_DIALOG_STORAGE_KEY, ResizableWrapper } from "src/components/ui/ResizableWrapper";
 
 export const MAX_NOTE_LENGTH = 1000;
 
@@ -104,9 +104,9 @@ const MarkdownModal = ({
           minSize={{ height: 600, width: 800 }}
           storageKey={MARKDOWN_DIALOG_STORAGE_KEY}
         >
-          <Dialog.Header bg="brand.muted" flexShrink={0}>
-            <Heading size="xl">{header}</Heading>
-            <Dialog.CloseTrigger closeButtonProps={{ size: "xl" }} />
+          <Dialog.Header alignItems="center" justifyContent="space-between">
+            <Dialog.Title>{header}</Dialog.Title>
+            <Dialog.CloseTrigger />
           </Dialog.Header>
           <Dialog.Body alignItems="stretch" as={VStack} flex="1" gap="0" overflow="hidden" p={0}>
             <Box display="flex" flex="1" flexDirection="column" minH={0} overflow="hidden" p={4} width="100%">
@@ -127,7 +127,7 @@ const MarkdownModal = ({
                 </Box>
               )}
             </Box>
-            <Box bg="bg.panel" flexShrink={0} width="100%">
+            <Box flexShrink={0} width="100%">
               <Flex alignItems="center" gap={4} justifyContent="space-between" p={4}>
                 {isEditing ? (
                   <Text color={isOverLimit ? "fg.error" : "fg.muted"} fontSize="sm">
diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
index c70f76ff38cdd..14823133ac698 100644
--- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, VStack, HStack, Spinner, Center, Text } from "@chakra-ui/react";
+import { Center, HStack, Spinner, Text, VStack } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useDagServiceGetDag } from "openapi/queries";
-import { Dialog, Tooltip } from "src/components/ui";
+import { Modal, Tooltip } from "src/components/ui";
 import { RadioCardItem, RadioCardRoot } from "src/components/ui/RadioCard";
 import { useTrigger } from "src/queries/useTrigger";
 
@@ -80,84 +80,80 @@ const TriggerDAGModal = ({
   const nameOverflowing = dagDisplayName.length > maxDisplayLength;
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={open} unmountOnExit>
-      <Dialog.Content backdrop>
-        <Dialog.Header paddingBottom={0}>
-          <VStack align="start" gap={2} width="100%" wordBreak="break-all">
-            <Heading size="xl">
-              {runMode === RunMode.SINGLE ? translate("triggerDag.title") : translate("backfill.title")} -{" "}
-              {nameOverflowing ? <br /> : undefined} {dagDisplayName}
-            </Heading>
+    <Modal
+      lazyMount
+      onOpenChange={onClose}
+      open={open}
+      title={
+        <>
+          {runMode === RunMode.SINGLE ? translate("triggerDag.title") : translate("backfill.title")} -{" "}
+          {nameOverflowing ? <br /> : undefined} {dagDisplayName}
+        </>
+      }
+      unmountOnExit
+    >
+      {isLoading ? (
+        <Center py={6}>
+          <VStack>
+            <Spinner size="lg" />
+            <Text mt={2}>{translate("triggerDag.loading")}</Text>
           </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body>
-          {isLoading ? (
-            <Center py={6}>
-              <VStack>
-                <Spinner size="lg" />
-                <Text mt={2}>{translate("triggerDag.loading")}</Text>
-              </VStack>
-            </Center>
-          ) : isError ? (
-            <Center py={6}>
-              <Text color="fg.error">{translate("triggerDag.loadingFailed")}</Text>
-            </Center>
-          ) : (
-            <>
-              {dag ? (
-                <RadioCardRoot
-                  my={4}
-                  onChange={(event) => {
-                    setRunMode((event.target as HTMLInputElement).value as RunMode);
-                  }}
-                  value={runMode}
+        </Center>
+      ) : isError ? (
+        <Center py={6}>
+          <Text color="fg.error">{translate("triggerDag.loadingFailed")}</Text>
+        </Center>
+      ) : (
+        <>
+          {dag ? (
+            <RadioCardRoot
+              my={4}
+              onChange={(event) => {
+                setRunMode((event.target as HTMLInputElement).value as RunMode);
+              }}
+              value={runMode}
+            >
+              <HStack align="stretch">
+                <RadioCardItem
+                  description={translate("triggerDag.selectDescription")}
+                  label={translate("triggerDag.selectLabel")}
+                  value={RunMode.SINGLE}
+                />
+                <Tooltip
+                  content={translate("backfill.scheduleNotBackfillable")}
+                  disabled={isBackfillable}
+                  portalled
                 >
-                  <HStack align="stretch">
-                    <RadioCardItem
-                      description={translate("triggerDag.selectDescription")}
-                      label={translate("triggerDag.selectLabel")}
-                      value={RunMode.SINGLE}
-                    />
-                    <Tooltip
-                      content={translate("backfill.scheduleNotBackfillable")}
-                      disabled={isBackfillable}
-                      portalled
-                    >
-                      <RadioCardItem
-                        description={translate("backfill.selectDescription")}
-                        disabled={!isBackfillable}
-                        label={translate("backfill.selectLabel")}
-                        value={RunMode.BACKFILL}
-                      />
-                    </Tooltip>
-                  </HStack>
-                </RadioCardRoot>
-              ) : undefined}
+                  <RadioCardItem
+                    description={translate("backfill.selectDescription")}
+                    disabled={!isBackfillable}
+                    label={translate("backfill.selectLabel")}
+                    value={RunMode.BACKFILL}
+                  />
+                </Tooltip>
+              </HStack>
+            </RadioCardRoot>
+          ) : undefined}
 
-              {runMode === RunMode.SINGLE ? (
-                <TriggerDAGForm
-                  dagDisplayName={dagDisplayName}
-                  dagId={dagId}
-                  error={error}
-                  hasSchedule={hasSchedule}
-                  isPartitioned={isPartitioned}
-                  isPaused={isPaused}
-                  isPending={isPending}
-                  onSubmitTrigger={triggerDagRun}
-                  open={open}
-                  prefillConfig={prefillConfig}
-                />
-              ) : (
-                isBackfillable && dag && <RunBackfillForm dag={dag} onClose={onClose} />
-              )}
-            </>
+          {runMode === RunMode.SINGLE ? (
+            <TriggerDAGForm
+              dagDisplayName={dagDisplayName}
+              dagId={dagId}
+              error={error}
+              hasSchedule={hasSchedule}
+              isPartitioned={isPartitioned}
+              isPaused={isPaused}
+              isPending={isPending}
+              onSubmitTrigger={triggerDagRun}
+              open={open}
+              prefillConfig={prefillConfig}
+            />
+          ) : (
+            isBackfillable && dag && <RunBackfillForm dag={dag} onClose={onClose} />
           )}
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+        </>
+      )}
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Dialog/CloseTrigger.tsx b/airflow-core/src/airflow/ui/src/components/ui/Dialog/CloseTrigger.tsx
index cad168282ff09..ff35fb8748462 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/Dialog/CloseTrigger.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/Dialog/CloseTrigger.tsx
@@ -25,8 +25,18 @@ type Props = {
 
 export const CloseTrigger = forwardRef<HTMLButtonElement, Props>(
   ({ children, closeButtonProps, ...rest }, ref) => (
-    <ChakraDialog.CloseTrigger insetEnd="2" position="absolute" top="2" {...rest} asChild>
-      <CloseButton ref={ref} size="sm" {...closeButtonProps}>
+    <ChakraDialog.CloseTrigger {...rest} asChild>
+      <CloseButton
+        _hover={{ bg: "brand.emphasized", color: "fg" }}
+        borderRadius="md"
+        color="fg.muted"
+        colorPalette="brand"
+        ref={ref}
+        size="sm"
+        transition="background-color 0.2s ease, color 0.2s ease"
+        variant="plain"
+        {...closeButtonProps}
+      >
         {children}
       </CloseButton>
     </ChakraDialog.CloseTrigger>
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.test.tsx b/airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.test.tsx
new file mode 100644
index 0000000000000..9ef95e7c1b81e
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.test.tsx
@@ -0,0 +1,183 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Button } from "@chakra-ui/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { BaseWrapper } from "src/utils/Wrapper";
+
+import { Modal } from "./Modal";
+
+describe("Modal", () => {
+  it("renders the heading and body content when open", () => {
+    render(
+      <Modal open title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(screen.getByText("Modal Heading")).toBeInTheDocument();
+    expect(screen.getByText("Lorem Ipsum Content")).toBeInTheDocument();
+  });
+
+  it("renders nothing while closed", () => {
+    render(
+      <Modal open={false} title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(screen.queryByText("Modal Heading")).not.toBeInTheDocument();
+    expect(screen.queryByText("Lorem Ipsum Content")).not.toBeInTheDocument();
+  });
+
+  it("renders a close button by default", () => {
+    render(<Modal open title="Modal Heading" />, { wrapper: BaseWrapper });
+
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+  });
+
+  it("hides the close button when hideCloseButton is set", () => {
+    render(<Modal hideCloseButton open title="Modal Heading" />, { wrapper: BaseWrapper });
+
+    expect(screen.queryByRole("button", { name: "Close" })).not.toBeInTheDocument();
+  });
+
+  it("calls onOpenChange when the close button is clicked", async () => {
+    const onOpenChange = vi.fn();
+
+    render(<Modal onOpenChange={onOpenChange} open title="Modal Heading" />, {
+      wrapper: BaseWrapper,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+
+    await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith({ open: false }));
+  });
+
+  it("renders no footer when no footer content is given", () => {
+    const { container } = render(
+      <Modal open title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(container.ownerDocument.querySelector(".chakra-dialog__footer")).toBeNull();
+  });
+
+  it("renders footerActions with the primary action first in DOM order", () => {
+    render(
+      <Modal footerActions={<Button>Save</Button>} open title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    const footer = screen.getByRole("button", { name: "Save" }).closest(".chakra-dialog__footer");
+
+    expect(footer).not.toBeNull();
+    // The primary action is first in the document, so it is reached first when
+    // tabbing, while `row-reverse` still renders it rightmost. The trailing entry is
+    // the built-in cancel action; i18n resources are not loaded here, so it renders
+    // its translation key.
+    expect([...(footer?.querySelectorAll("button") ?? [])].map((button) => button.textContent)).toStrictEqual(
+      ["Save", "modal.cancel"],
+    );
+    expect(globalThis.getComputedStyle(footer?.firstElementChild as HTMLElement).flexDirection).toBe(
+      "row-reverse",
+    );
+  });
+
+  it("lets headerProps and bodyProps children override the defaults", () => {
+    render(
+      <Modal
+        bodyProps={{ children: <span>Body Override</span> }}
+        headerProps={{ children: <span>Header Override</span> }}
+        open
+        title="Modal Heading"
+      >
+        Ignored Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(screen.getByText("Header Override")).toBeInTheDocument();
+    expect(screen.getByText("Body Override")).toBeInTheDocument();
+    expect(screen.queryByText("Modal Heading")).not.toBeInTheDocument();
+    expect(screen.queryByText("Ignored Content")).not.toBeInTheDocument();
+  });
+
+  it("hides the built-in cancel action when hideCancelAction is set", () => {
+    render(
+      <Modal footerActions={<Button>Save</Button>} hideCancelAction open title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "modal.cancel" })).not.toBeInTheDocument();
+  });
+
+  it("adds no cancel action when there are no footer actions", () => {
+    const { container } = render(
+      <Modal open title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(container.ownerDocument.querySelector(".chakra-dialog__footer")).toBeNull();
+    expect(screen.queryByRole("button", { name: "modal.cancel" })).not.toBeInTheDocument();
+  });
+
+  it("closes the dialog when the built-in cancel action is clicked", async () => {
+    const onOpenChange = vi.fn();
+
+    render(
+      <Modal footerActions={<Button>Save</Button>} onOpenChange={onOpenChange} open title="Modal Heading">
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "modal.cancel" }));
+
+    await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith({ open: false }));
+  });
+
+  it("lets cancelActionProps override the built-in cancel action", () => {
+    render(
+      <Modal
+        cancelActionProps={{ children: "Never mind", "data-testid": "custom-cancel" }}
+        footerActions={<Button>Save</Button>}
+        open
+        title="Modal Heading"
+      >
+        Lorem Ipsum Content
+      </Modal>,
+      { wrapper: BaseWrapper },
+    );
+
+    expect(screen.getByTestId("custom-cancel")).toHaveTextContent("Never mind");
+  });
+});
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.tsx b/airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.tsx
new file mode 100644
index 0000000000000..377659640ec91
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/components/ui/Modal/Modal.tsx
@@ -0,0 +1,107 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Button, type ButtonProps, type Dialog as ChakraDialog, Flex } from "@chakra-ui/react";
+import type { ComponentProps, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Dialog } from "src/components/ui/Dialog";
+
+export type ModalProps = {
+  readonly bodyProps?: ChakraDialog.BodyProps;
+  readonly cancelActionProps?: { readonly "data-testid"?: string } & ButtonProps;
+  readonly children?: ReactNode;
+  readonly contentProps?: ComponentProps<typeof Dialog.Content>;
+  readonly footerActions?: ReactNode;
+  readonly footerProps?: ChakraDialog.FooterProps;
+  readonly headerProps?: ChakraDialog.HeaderProps;
+  readonly hideCancelAction?: boolean;
+  readonly hideCloseButton?: boolean;
+  readonly title?: ReactNode;
+} & Omit<ChakraDialog.RootProps, "children">;
+
+/**
+ * Wraps the Chakra `Dialog` parts so a modal is declared through props rather than
+ * assembled from Root/Content/Header/CloseTrigger/Body/Footer at every call site.
+ *
+ * Each slot accepts a `*Props` escape hatch, and passing `children` through one of
+ * those overrides that slot's default content entirely.
+ *
+ * A dialog that supplies `footerActions` also gets a Cancel action beside them,
+ * unless `hideCancelAction` is set. Dialogs with no footer actions are unaffected —
+ * a lone Cancel is not reason enough to grow a footer.
+ */
+export const Modal = ({
+  bodyProps,
+  cancelActionProps,
+  children,
+  contentProps,
+  footerActions,
+  footerProps,
+  headerProps,
+  hideCancelAction = false,
+  hideCloseButton = false,
+  lazyMount = true,
+  title,
+  unmountOnExit = true,
+  ...rest
+}: ModalProps) => {
+  const { t: translate } = useTranslation("common");
+
+  const titleContent = title === undefined ? undefined : <Dialog.Title>{title}</Dialog.Title>;
+  const headerContent = headerProps?.children ?? titleContent;
+  const actionsContent =
+    footerActions === undefined ? undefined : (
+      // `row-reverse` renders the first action rightmost, so the primary action is
+      // written first and therefore reached first when tabbing.
+      <Flex flexDirection="row-reverse" gap={2} w="100%">
+        {footerActions}
+        {hideCancelAction ? undefined : (
+          <Dialog.ActionTrigger asChild>
+            <Button variant="outline" {...cancelActionProps}>
+              {cancelActionProps?.children ?? translate("modal.cancel")}
+            </Button>
+          </Dialog.ActionTrigger>
+        )}
+      </Flex>
+    );
+  const footerContent = footerProps?.children ?? actionsContent;
+
+  return (
+    <Dialog.Root lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...rest}>
+      <Dialog.Content {...contentProps}>
+        {headerContent === undefined ? undefined : (
+          <Dialog.Header
+            {...headerProps}
+            alignItems="center"
+            gap={2}
+            justifyContent="space-between"
+            paddingRight={hideCloseButton ? undefined : 3}
+          >
+            {headerContent}
+            {hideCloseButton ? undefined : <Dialog.CloseTrigger />}
+          </Dialog.Header>
+        )}
+        <Dialog.Body {...bodyProps}>{bodyProps?.children ?? children}</Dialog.Body>
+        {footerContent === undefined ? undefined : (
+          <Dialog.Footer {...footerProps}>{footerContent}</Dialog.Footer>
+        )}
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
diff --git a/airflow-core/src/airflow/ui/src/components/ui/Modal/index.ts b/airflow-core/src/airflow/ui/src/components/ui/Modal/index.ts
new file mode 100644
index 0000000000000..712d096a8e7da
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/components/ui/Modal/index.ts
@@ -0,0 +1,19 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export * from "./Modal";
diff --git a/airflow-core/src/airflow/ui/src/components/ui/index.ts b/airflow-core/src/airflow/ui/src/components/ui/index.ts
index 54c80dea62adb..423d0373a10af 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/index.ts
+++ b/airflow-core/src/airflow/ui/src/components/ui/index.ts
@@ -17,23 +17,24 @@
  * under the License.
  */
 
-export * from "./Dialog";
-export * from "./IconButton";
-export * from "./Pagination";
-export * from "./Select";
-export * from "./Alert";
-export * from "./Switch";
-export * from "./Tooltip";
-export * from "./ProgressBar";
-export * from "./Menu";
 export * from "./Accordion";
-export * from "./Toaster";
+export * from "./Alert";
 export * from "./Breadcrumb";
-export * from "./Clipboard";
-export * from "./Popover";
+export * from "./ButtonGroupToggle";
 export * from "./Checkbox";
-export * from "./ResetButton";
+export * from "./Clipboard";
+export * from "./Dialog";
+export * from "./IconButton";
 export * from "./InputWithAddon";
-export * from "./ButtonGroupToggle";
 export * from "./LazyClipboard";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./Pagination";
+export * from "./Popover";
+export * from "./ProgressBar";
+export * from "./ResetButton";
 export * from "./RouterLink";
+export * from "./Select";
+export * from "./Switch";
+export * from "./Toaster";
+export * from "./Tooltip";
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageModal.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageModal.tsx
index bd5e3b551a919..305e0037e140c 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageModal.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageModal.tsx
@@ -18,7 +18,7 @@
  */
 import { useTranslation } from "react-i18next";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 
 import LanguageSelector from "./LanguageSelector";
 
@@ -31,15 +31,9 @@ const LanguageModal = ({ isOpen, onClose }: LanguageModalProps) => {
   const { t: translate } = useTranslation();
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={isOpen}>
-      <Dialog.Content backdrop>
-        <Dialog.Header>{translate("selectLanguage")}</Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <LanguageSelector />
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal lazyMount onOpenChange={onClose} open={isOpen} title={translate("selectLanguage")}>
+      <LanguageSelector />
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneModal.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneModal.tsx
index f8a11272ab426..3d338c2add378 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneModal.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneModal.tsx
@@ -18,7 +18,7 @@
  */
 import { useTranslation } from "react-i18next";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 
 import TimezoneSelector from "./TimezoneSelector";
 
@@ -31,15 +31,9 @@ const TimezoneModal = ({ isOpen, onClose }: TimezoneModalProps) => {
   const { t: translate } = useTranslation("common");
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={isOpen}>
-      <Dialog.Content backdrop>
-        <Dialog.Header>{translate("timezoneModal.title")}</Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <TimezoneSelector />
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal lazyMount onOpenChange={onClose} open={isOpen} title={translate("timezoneModal.title")}>
+      <TimezoneSelector />
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/TokenGenerationModal.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/TokenGenerationModal.tsx
index 099ed202c402b..d8b31e6c0b238 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/TokenGenerationModal.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/TokenGenerationModal.tsx
@@ -23,7 +23,7 @@ import { FiAlertTriangle } from "react-icons/fi";
 
 import { useAuthLinksServiceGenerateToken } from "openapi/queries";
 import type { GenerateTokenResponse } from "openapi/requests/types.gen";
-import { Dialog, toaster } from "src/components/ui";
+import { Modal, toaster } from "src/components/ui";
 import { ClipboardIconButton, ClipboardInput, ClipboardRoot } from "src/components/ui/Clipboard";
 
 type TokenGenerationModalProps = {
@@ -78,59 +78,47 @@ const TokenGenerationModal = ({ isOpen, onClose }: TokenGenerationModalProps) =>
   }, [generateToken, tokenType]);
 
   return (
-    <Dialog.Root lazyMount onOpenChange={handleClose} open={isOpen}>
-      <Dialog.Content backdrop>
-        <Dialog.Header>{translate("tokenGeneration.title")}</Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          {generatedToken !== undefined && generatedToken !== "" ? (
-            <Box>
-              <Text fontWeight="semibold" mb={2}>
-                {translate("tokenGeneration.tokenGenerated")}
-              </Text>
-              <ClipboardRoot value={generatedToken}>
-                <Flex alignItems="center" gap={2}>
-                  <ClipboardInput readOnly />
-                  <ClipboardIconButton />
-                </Flex>
-              </ClipboardRoot>
-              <HStack color="orange.500" gap={2} mt={3}>
-                <FiAlertTriangle />
-                <Text fontSize="sm">{translate("tokenGeneration.tokenShownOnce")}</Text>
-              </HStack>
-              {expiresIn !== undefined && expiresIn > 0 ? (
-                <Text color="fg.muted" fontSize="sm" mt={2}>
-                  {translate("tokenGeneration.tokenExpiresIn", {
-                    duration: formatExpiration(expiresIn),
-                  })}
-                </Text>
-              ) : undefined}
-            </Box>
-          ) : (
-            <Box>
-              <Text mb={3}>{translate("tokenGeneration.selectType")}</Text>
-              <HStack gap={3} mb={4}>
-                <Button
-                  onClick={() => setTokenType("api")}
-                  variant={tokenType === "api" ? "solid" : "outline"}
-                >
-                  {translate("tokenGeneration.apiToken")}
-                </Button>
-                <Button
-                  onClick={() => setTokenType("cli")}
-                  variant={tokenType === "cli" ? "solid" : "outline"}
-                >
-                  {translate("tokenGeneration.cliToken")}
-                </Button>
-              </HStack>
-              <Button loading={isPending} onClick={handleGenerate} width="full">
-                {translate("tokenGeneration.generate")}
-              </Button>
-            </Box>
-          )}
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal lazyMount onOpenChange={handleClose} open={isOpen} title={translate("tokenGeneration.title")}>
+      {generatedToken !== undefined && generatedToken !== "" ? (
+        <Box>
+          <Text fontWeight="semibold" mb={2}>
+            {translate("tokenGeneration.tokenGenerated")}
+          </Text>
+          <ClipboardRoot value={generatedToken}>
+            <Flex alignItems="center" gap={2}>
+              <ClipboardInput readOnly />
+              <ClipboardIconButton />
+            </Flex>
+          </ClipboardRoot>
+          <HStack color="orange.500" gap={2} mt={3}>
+            <FiAlertTriangle />
+            <Text fontSize="sm">{translate("tokenGeneration.tokenShownOnce")}</Text>
+          </HStack>
+          {expiresIn !== undefined && expiresIn > 0 ? (
+            <Text color="fg.muted" fontSize="sm" mt={2}>
+              {translate("tokenGeneration.tokenExpiresIn", {
+                duration: formatExpiration(expiresIn),
+              })}
+            </Text>
+          ) : undefined}
+        </Box>
+      ) : (
+        <Box>
+          <Text mb={3}>{translate("tokenGeneration.selectType")}</Text>
+          <HStack gap={3} mb={4}>
+            <Button onClick={() => setTokenType("api")} variant={tokenType === "api" ? "solid" : "outline"}>
+              {translate("tokenGeneration.apiToken")}
+            </Button>
+            <Button onClick={() => setTokenType("cli")} variant={tokenType === "cli" ? "solid" : "outline"}>
+              {translate("tokenGeneration.cliToken")}
+            </Button>
+          </HStack>
+          <Button loading={isPending} onClick={handleGenerate} width="full">
+            {translate("tokenGeneration.generate")}
+          </Button>
+        </Box>
+      )}
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/AssetStateStore/AssetStateStoreModal.tsx b/airflow-core/src/airflow/ui/src/pages/Asset/AssetStateStore/AssetStateStoreModal.tsx
index 3a955ce93ada2..7f92961678b5e 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/AssetStateStore/AssetStateStoreModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/AssetStateStore/AssetStateStoreModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, Heading, Input, Text, VStack } from "@chakra-ui/react";
+import { Box, Button, Input, Text, VStack } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -27,7 +27,7 @@ import {
   useAssetStateStoreServiceSetAssetStateStore,
 } from "openapi/queries";
 import { JsonEditor } from "src/components/JsonEditor";
-import { Dialog, ProgressBar } from "src/components/ui";
+import { Modal, ProgressBar } from "src/components/ui";
 import { useStoreMutation } from "src/queries/useStoreMutation";
 
 type Props = {
@@ -92,50 +92,45 @@ export const AssetStateStoreModal = ({ assetId, isOpen, mode, onClose, storeKey
   };
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={isOpen} unmountOnExit>
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <Heading size="lg">{translate(`assets:assetStateStore.${mode}`)}</Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          {isFetchingExisting ? (
-            <ProgressBar size="xs" />
-          ) : (
-            <VStack gap={4}>
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("common:key")}
-                </Text>
-                {isEditMode ? (
-                  <Text>{storeKey}</Text>
-                ) : (
-                  <Input onChange={(event) => setKey(event.target.value)} value={key} />
-                )}
-              </Box>
+    <Modal
+      footerActions={
+        <Button
+          disabled={isFetchingExisting || !isValueValid || (!isEditMode && key === "")}
+          loading={isPending}
+          onClick={onSave}
+        >
+          {translate("common:modal.save")}
+        </Button>
+      }
+      lazyMount
+      onOpenChange={onClose}
+      open={isOpen}
+      title={translate(`assets:assetStateStore.${mode}`)}
+      unmountOnExit
+    >
+      {isFetchingExisting ? (
+        <ProgressBar size="xs" />
+      ) : (
+        <VStack gap={4}>
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("common:key")}
+            </Text>
+            {isEditMode ? (
+              <Text>{storeKey}</Text>
+            ) : (
+              <Input onChange={(event) => setKey(event.target.value)} value={key} />
+            )}
+          </Box>
 
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("common:value")}
-                </Text>
-                <JsonEditor onChange={setValue} value={value} />
-              </Box>
-            </VStack>
-          )}
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={onClose} variant="outline">
-            {translate("common:modal.cancel")}
-          </Button>
-          <Button
-            disabled={isFetchingExisting || !isValueValid || (!isEditMode && key === "")}
-            loading={isPending}
-            onClick={onSave}
-          >
-            {translate("common:modal.save")}
-          </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog.Root>
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("common:value")}
+            </Text>
+            <JsonEditor onChange={setValue} value={value} />
+          </Box>
+        </VStack>
+      )}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.test.tsx b/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.test.tsx
index 9784f59ed88fd..5cd945c323379 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.test.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.test.tsx
@@ -43,23 +43,27 @@ const materializeSubmitParams = vi.hoisted<DagRunTriggerParams>(() => ({
 
 vi.mock("src/components/ui", async (importOriginal) => {
   const actual = await importOriginal<typeof Ui>();
-  // Must stay inside the factory: vitest hoists vi.mock above module scope, so an outer-scope
-  // component cannot be referenced here.
-  // eslint-disable-next-line unicorn/consistent-function-scoping
-  const DialogPart = ({ children }: { readonly children?: ReactNode }) => <div>{children}</div>;
 
   return {
     ...actual,
-    Dialog: {
-      ...actual.Dialog,
-      Body: DialogPart,
-      CloseTrigger: () => undefined,
-      Content: DialogPart,
-      Footer: DialogPart,
-      Header: DialogPart,
-      Root: ({ children, open }: { readonly children?: ReactNode; readonly open?: boolean }) =>
-        open ? <div>{children}</div> : undefined,
-    },
+    Modal: ({
+      children,
+      footerActions,
+      open,
+      title,
+    }: {
+      readonly children?: ReactNode;
+      readonly footerActions?: ReactNode;
+      readonly open?: boolean;
+      readonly title?: ReactNode;
+    }) =>
+      open ? (
+        <div>
+          {title}
+          {children}
+          {footerActions}
+        </div>
+      ) : undefined,
   };
 });
 
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.tsx b/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.tsx
index 76a291d4667f5..3012c1af1ab75 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/CreateAssetEventModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Field, Heading, HStack, Input, Text, VStack } from "@chakra-ui/react";
+import { Button, Field, HStack, Input, Text } from "@chakra-ui/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -37,14 +37,14 @@ import type {
   AssetEventResponse,
   AssetResponse,
   DAGRunResponse,
-  MaterializeAssetBody,
   EdgeResponse,
+  MaterializeAssetBody,
 } from "openapi/requests/types.gen";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import { JsonEditor } from "src/components/JsonEditor";
 import TriggerDAGForm from "src/components/TriggerDag/TriggerDAGForm";
 import type { DagRunTriggerParams } from "src/components/TriggerDag/types";
-import { Dialog, toaster } from "src/components/ui";
+import { Modal, toaster } from "src/components/ui";
 import { RadioCardItem, RadioCardRoot } from "src/components/ui/RadioCard";
 import { toNullablePartitionKey } from "src/utils";
 
@@ -165,86 +165,80 @@ export const CreateAssetEventModal = ({ asset, onClose, open }: Props) => {
     });
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={open} unmountOnExit>
-      <Dialog.Content backdrop>
-        <Dialog.Header paddingBottom={0}>
-          <VStack align="start" gap={4}>
-            <Heading size="xl">{translate("createEvent.title", { name: asset.name })}</Heading>
-          </VStack>
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body>
-          <RadioCardRoot
-            mb={6}
-            onChange={(event) => {
-              setEventType((event.target as HTMLInputElement).value);
-            }}
-            value={eventType}
-          >
-            <HStack align="stretch">
-              <RadioCardItem
-                description={
-                  upstreamDagId === undefined
-                    ? translate("createEvent.materialize.description")
-                    : translate("createEvent.materialize.descriptionWithDag", {
-                        dagName: dag?.dag_display_name ?? upstreamDagId,
-                      })
-                }
-                disabled={!hasUpstreamDag}
-                label={translate("createEvent.materialize.label")}
-                value="materialize"
-              />
-              <RadioCardItem
-                description={translate("createEvent.manual.description")}
-                label={translate("createEvent.manual.label")}
-                value="manual"
-              />
-            </HStack>
-          </RadioCardRoot>
-          {eventType === "manual" ? (
-            <Field.Root mt={6}>
-              <Field.Label fontSize="md">{translate("createEvent.manual.extra")}</Field.Label>
-              <JsonEditor onChange={setExtra} onError={setExtraError} prettify value={extra} />
-              <Text color="fg.error">{extraError}</Text>
-            </Field.Root>
-          ) : undefined}
-          {eventType === "manual" ? (
-            <>
-              <Field.Root mt={6}>
-                <Field.Label fontSize="md">{translate("common:dagRun.partitionKey")}</Field.Label>
-                <Input
-                  onChange={(event) => setPartitionKey(event.target.value)}
-                  size="sm"
-                  value={partitionKey ?? ""}
-                />
-              </Field.Root>
-              <ErrorAlert error={manualError} />
-            </>
-          ) : undefined}
-          {eventType === "materialize" && dag !== undefined && upstreamDagId !== undefined ? (
-            <TriggerDAGForm
-              dagDisplayName={dag.dag_display_name}
-              dagId={upstreamDagId}
-              error={materializeError}
-              hasSchedule={dag.timetable_summary !== null}
-              isPartitioned={dag.timetable_partitioned}
-              isPaused={dag.is_paused}
-              isPending={isMaterializePending}
-              onSubmitTrigger={handleMaterializeSubmit}
-              open={open}
+    <Modal
+      footerActions={
+        eventType === "manual" ? (
+          <Button disabled={Boolean(extraError)} loading={isManualPending} onClick={handleManualSubmit}>
+            <FiPlay /> {translate("createEvent.button")}
+          </Button>
+        ) : undefined
+      }
+      lazyMount
+      onOpenChange={onClose}
+      open={open}
+      title={translate("createEvent.title", { name: asset.name })}
+      unmountOnExit
+    >
+      <RadioCardRoot
+        mb={6}
+        onChange={(event) => {
+          setEventType((event.target as HTMLInputElement).value);
+        }}
+        value={eventType}
+      >
+        <HStack align="stretch">
+          <RadioCardItem
+            description={
+              upstreamDagId === undefined
+                ? translate("createEvent.materialize.description")
+                : translate("createEvent.materialize.descriptionWithDag", {
+                    dagName: dag?.dag_display_name ?? upstreamDagId,
+                  })
+            }
+            disabled={!hasUpstreamDag}
+            label={translate("createEvent.materialize.label")}
+            value="materialize"
+          />
+          <RadioCardItem
+            description={translate("createEvent.manual.description")}
+            label={translate("createEvent.manual.label")}
+            value="manual"
+          />
+        </HStack>
+      </RadioCardRoot>
+      {eventType === "manual" ? (
+        <Field.Root mt={6}>
+          <Field.Label fontSize="md">{translate("createEvent.manual.extra")}</Field.Label>
+          <JsonEditor onChange={setExtra} onError={setExtraError} prettify value={extra} />
+          <Text color="fg.error">{extraError}</Text>
+        </Field.Root>
+      ) : undefined}
+      {eventType === "manual" ? (
+        <>
+          <Field.Root mt={6}>
+            <Field.Label fontSize="md">{translate("common:dagRun.partitionKey")}</Field.Label>
+            <Input
+              onChange={(event) => setPartitionKey(event.target.value)}
+              size="sm"
+              value={partitionKey ?? ""}
             />
-          ) : undefined}
-        </Dialog.Body>
-        {eventType === "manual" ? (
-          <Dialog.Footer>
-            <Button disabled={Boolean(extraError)} loading={isManualPending} onClick={handleManualSubmit}>
-              <FiPlay /> {translate("createEvent.button")}
-            </Button>
-          </Dialog.Footer>
-        ) : undefined}
-      </Dialog.Content>
-    </Dialog.Root>
+          </Field.Root>
+          <ErrorAlert error={manualError} />
+        </>
+      ) : undefined}
+      {eventType === "materialize" && dag !== undefined && upstreamDagId !== undefined ? (
+        <TriggerDAGForm
+          dagDisplayName={dag.dag_display_name}
+          dagId={upstreamDagId}
+          error={materializeError}
+          hasSchedule={dag.timetable_summary !== null}
+          isPartitioned={dag.timetable_partitioned}
+          isPaused={dag.is_paused}
+          isPending={isMaterializePending}
+          onSubmitTrigger={handleMaterializeSubmit}
+          open={open}
+        />
+      ) : undefined}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx
index 6b2bd2ff0ad7b..62dc61b05044a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/AddConnectionButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Heading, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { MdAdd } from "react-icons/md";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { useAddConnection } from "src/queries/useAddConnection";
 
 import ConnectionForm from "./ConnectionForm";
@@ -49,26 +49,14 @@ const AddConnectionButton = () => {
         <MdAdd /> {translate("connections.add")}
       </Button>
 
-      <Dialog.Root lazyMount onOpenChange={onClose} open={open} unmountOnExit>
-        <Dialog.Content backdrop>
-          <Dialog.Header paddingBottom={0}>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">{translate("connections.add")}</Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <ConnectionForm
-              error={error}
-              initialConnection={initialConnection}
-              isPending={isPending}
-              mutateConnection={addConnection}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal lazyMount onOpenChange={onClose} open={open} title={translate("connections.add")} unmountOnExit>
+        <ConnectionForm
+          error={error}
+          initialConnection={initialConnection}
+          isPending={isPending}
+          mutateConnection={addConnection}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx
index 11d9cf6c3105a..41a7d24cbaef9 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Code, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, Code, Text, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
-import { Dialog, IconButton } from "src/components/ui";
+import { Modal, IconButton } from "src/components/ui";
 import { useDeleteConnection } from "src/queries/useDeleteConnection";
 
 type Props = {
@@ -46,43 +46,35 @@ const DeleteConnectionButton = ({ connectionId, disabled }: Props) => {
         <FiTrash2 />
       </IconButton>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">{translate("connections.delete.deleteConnection", { count: 1 })}</Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body width="full">
-            <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
-              {translate("connections.delete.firstConfirmMessage_one")}
-              <br />
-              <Code mb={2} mt={2} p={4}>
-                {connectionId}
-              </Code>
-              <br />
-              {translate("deleteActions.modal.secondConfirmMessage")}
-              <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
-            </Text>
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                colorPalette="danger"
-                loading={isPending}
-                onClick={() => {
-                  mutate({
-                    connectionId,
-                  });
-                }}
-              >
-                <FiTrash2 /> <Text fontWeight="bold">{translate("deleteActions.modal.confirmButton")}</Text>
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        footerActions={
+          <Button
+            colorPalette="danger"
+            loading={isPending}
+            onClick={() => {
+              mutate({
+                connectionId,
+              });
+            }}
+          >
+            <FiTrash2 /> <Text fontWeight="bold">{translate("deleteActions.modal.confirmButton")}</Text>
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={translate("connections.delete.deleteConnection", { count: 1 })}
+      >
+        <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
+          {translate("connections.delete.firstConfirmMessage_one")}
+          <br />
+          <Code mb={2} mt={2} p={4}>
+            {connectionId}
+          </Code>
+          <br />
+          {translate("deleteActions.modal.secondConfirmMessage")}
+          <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
+        </Text>
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx
index cbf29e23b5cc6..eea38e988a82d 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/DeleteConnectionsButton.tsx
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Code, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, Code, Text, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { useBulkDeleteConnections } from "src/queries/useBulkDeleteConnections";
 
 type Props = {
@@ -52,44 +52,34 @@ const DeleteConnectionsButton = ({ clearSelections, deleteKeys: connectionIds }:
         <FiTrash2 /> {translate("deleteActions.button")}
       </Button>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("connections.delete.deleteConnection", { count: connectionIds.length })}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body width="full">
-            <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
-              {translate("connections.delete.firstConfirmMessage", { count: connectionIds.length })}
-              <br />
-              <Code mb={2} mt={2} p={4}>
-                {connectionIds.join(", ")}
-              </Code>
-              <br />
-              {translate("deleteActions.modal.secondConfirmMessage")}
-              <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
-            </Text>
-            <ErrorAlert error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                colorPalette="red"
-                loading={isPending}
-                onClick={() => {
-                  mutate({ requestBody: { actions: [{ action: "delete", entities: connectionIds }] } });
-                }}
-              >
-                <FiTrash2 /> <Text as="span">{translate("deleteActions.modal.confirmButton")}</Text>
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        footerActions={
+          <Button
+            colorPalette="red"
+            loading={isPending}
+            onClick={() => {
+              mutate({ requestBody: { actions: [{ action: "delete", entities: connectionIds }] } });
+            }}
+          >
+            <FiTrash2 /> <Text as="span">{translate("deleteActions.modal.confirmButton")}</Text>
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={translate("connections.delete.deleteConnection", { count: connectionIds.length })}
+      >
+        <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
+          {translate("connections.delete.firstConfirmMessage", { count: connectionIds.length })}
+          <br />
+          <Code mb={2} mt={2} p={4}>
+            {connectionIds.join(", ")}
+          </Code>
+          <br />
+          {translate("deleteActions.modal.secondConfirmMessage")}
+          <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
+        </Text>
+        <ErrorAlert error={error} />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx b/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx
index 4829d77a21a0d..313cf61385b90 100644
--- a/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Connections/EditConnectionButton.tsx
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiEdit } from "react-icons/fi";
 
 import type { ConnectionResponse } from "openapi/requests/types.gen";
-import { Dialog, IconButton } from "src/components/ui";
+import { Modal, IconButton } from "src/components/ui";
 import { useEditConnection } from "src/queries/useEditConnection";
 
 import ConnectionForm from "./ConnectionForm";
@@ -61,25 +61,21 @@ const EditConnectionButton = ({ connection, disabled }: Props) => {
       <IconButton disabled={disabled} label={translate("connections.edit")} onClick={onOpen}>
         <FiEdit />
       </IconButton>
-      <Dialog.Root lazyMount onOpenChange={handleClose} open={open} unmountOnExit>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <Heading size="xl">{translate("connections.edit")}</Heading>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <ConnectionForm
-              error={error}
-              initialConnection={initialConnectionValue}
-              isEditMode
-              isPending={isPending}
-              mutateConnection={editConnection}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        lazyMount
+        onOpenChange={handleClose}
+        open={open}
+        title={translate("connections.edit")}
+        unmountOnExit
+      >
+        <ConnectionForm
+          error={error}
+          initialConnection={initialConnectionValue}
+          isEditMode
+          isPending={isPending}
+          mutateConnection={editConnection}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Backfills/BackfillDagRunsModal.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Backfills/BackfillDagRunsModal.tsx
index 855383256886f..2e4f7ae2b796e 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Backfills/BackfillDagRunsModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Backfills/BackfillDagRunsModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, Text } from "@chakra-ui/react";
+import { Text } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -28,7 +28,7 @@ import type { TableState } from "src/components/DataTable/types";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
-import { Dialog, RouterLink } from "src/components/ui";
+import { Modal, RouterLink } from "src/components/ui";
 import { useConfig } from "src/queries/useConfig";
 import { useAutoRefresh } from "src/utils";
 
@@ -183,36 +183,31 @@ export const BackfillDagRunsModal = ({ backfillId, dagId, onClose, open }: Backf
   };
 
   return (
-    <Dialog.Root
+    <Modal
       lazyMount
       onOpenChange={handleOpenChange}
       open={open}
       scrollBehavior="inside"
       size="cover"
+      title={
+        <>
+          {translate("common:backfill_one")} #{backfillId}
+        </>
+      }
       unmountOnExit
     >
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <Heading size="md">
-            {translate("common:backfill_one")} #{backfillId}
-          </Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <ErrorAlert error={backfillError} />
-          <ErrorAlert error={error} />
-          <DataTable
-            columns={getColumns(isPartitioned, translate)}
-            data={data?.backfill_dag_runs ?? []}
-            initialState={tableState}
-            isFetching={isFetching}
-            isLoading={isBackfillLoading || isLoading}
-            modelName="common:slot"
-            onStateChange={(state) => setPageIndex(state.pagination.pageIndex)}
-            total={data?.total_entries ?? 0}
-          />
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+      <ErrorAlert error={backfillError} />
+      <ErrorAlert error={error} />
+      <DataTable
+        columns={getColumns(isPartitioned, translate)}
+        data={data?.backfill_dag_runs ?? []}
+        initialState={tableState}
+        isFetching={isFetching}
+        isLoading={isBackfillLoading || isLoading}
+        modelName="common:slot"
+        onStateChange={(state) => setPageIndex(state.pagination.pageIndex)}
+        total={data?.total_entries ?? 0}
+      />
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
index 6698818703195..764e1eef61820 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
@@ -34,7 +34,7 @@ import { DagVersionSelect } from "src/components/DagVersionSelect";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Editor, { type EditorProps } from "src/components/MonacoEditor";
 import Time from "src/components/Time";
-import { Dialog, IconButton, ProgressBar } from "src/components/ui";
+import { IconButton, Modal, ProgressBar } from "src/components/ui";
 import { LazyClipboard } from "src/components/ui/LazyClipboard";
 import { useMonacoTheme } from "src/context/colorMode";
 import { SHORTCUTS } from "src/context/keyboardShortcuts";
@@ -321,32 +321,28 @@ export const Code = () => {
       {codeHeader}
       {codeStatus}
       {codeContent}
-      <Dialog.Root
+      <Modal
+        bodyProps={{ display: "flex", flexDirection: "column", minH: 0 }}
+        // size="full" gives the content only a min-height, which is not a definite
+        // height for flex children — without an explicit height the editor collapses.
+        contentProps={{ height: "100dvh" }}
+        headerProps={{
+          children: (
+            <Box display="flex" flexDirection="column" width="100%">
+              <Heading fontSize="lg">{dagId}</Heading>
+              {codeHeader}
+            </Box>
+          ),
+          width: "100%",
+        }}
         onOpenChange={() => setIsFullscreen(false)}
         open={isFullscreen}
         scrollBehavior="inside"
         size="full"
       >
-        {isFullscreen ? (
-          // size="full" gives the content only a min-height, which is not a definite
-          // height for flex children — without an explicit height the editor collapses.
-          <Dialog.Content backdrop h="100dvh">
-            <Dialog.Header width="100%">
-              <Box display="flex" flexDirection="column" width="100%">
-                <Heading size="xl">{dagId}</Heading>
-                {codeHeader}
-              </Box>
-            </Dialog.Header>
-
-            <Dialog.CloseTrigger />
-
-            <Dialog.Body display="flex" flexDirection="column" minH={0}>
-              {codeStatus}
-              {codeContent}
-            </Dialog.Body>
-          </Dialog.Content>
-        ) : undefined}
-      </Dialog.Root>
+        {codeStatus}
+        {codeContent}
+      </Modal>
     </Box>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/DagImportErrorModal.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/DagImportErrorModal.tsx
index 2d5a6a475957f..5043705463a05 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/DagImportErrorModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/DagImportErrorModal.tsx
@@ -23,7 +23,7 @@ import { PiFilePy } from "react-icons/pi";
 
 import type { ImportErrorResponse } from "openapi/requests/types.gen";
 import Time from "src/components/Time";
-import { ClipboardIconButton, Dialog } from "src/components/ui";
+import { ClipboardIconButton, Modal } from "src/components/ui";
 
 type Props = {
   readonly importError: ImportErrorResponse;
@@ -35,38 +35,42 @@ export const DagImportErrorModal = ({ importError, onClose, open }: Props) => {
   const { t: translate } = useTranslation(["dashboard", "components"]);
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={open} scrollBehavior="inside" size="lg">
-      <Dialog.Content backdrop p={4}>
-        <Dialog.Header>
-          <HStack fontSize="xl" gap={2}>
+    <Modal
+      contentProps={{ padding: 4 }}
+      headerProps={{
+        children: (
+          <HStack gap={2}>
             <LuFileWarning />
-            <Heading>{translate("importErrors.dagImportError", { count: 1 })}</Heading>
+            <Heading fontSize="lg">{translate("importErrors.dagImportError", { count: 1 })}</Heading>
           </HStack>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <HStack alignItems="center" flexWrap="wrap" gap={2} mb={2}>
-            <Text fontWeight="bold">
-              {translate("components:versionDetails.bundleName")}
-              {": "}
-              {importError.bundle_name}
-            </Text>
-            <PiFilePy />
-            {importError.filename}
-            <ClipboardRoot value={importError.filename}>
-              <ClipboardIconButton variant="outline" />
-            </ClipboardRoot>
-          </HStack>
-          <Text color="fg.muted" fontSize="sm" mb={2}>
-            {translate("importErrors.timestamp")}
-            {": "}
-            <Time datetime={importError.timestamp} />
-          </Text>
-          <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
-            <code>{importError.stack_trace}</code>
-          </Text>
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+        ),
+      }}
+      lazyMount
+      onOpenChange={onClose}
+      open={open}
+      scrollBehavior="inside"
+      size="lg"
+    >
+      <HStack alignItems="center" flexWrap="wrap" gap={2} mb={2}>
+        <Text fontWeight="bold">
+          {translate("components:versionDetails.bundleName")}
+          {": "}
+          {importError.bundle_name}
+        </Text>
+        <PiFilePy />
+        {importError.filename}
+        <ClipboardRoot value={importError.filename}>
+          <ClipboardIconButton variant="outline" />
+        </ClipboardRoot>
+      </HStack>
+      <Text color="fg.muted" fontSize="sm" mb={2}>
+        {translate("importErrors.timestamp")}
+        {": "}
+        <Time datetime={importError.timestamp} />
+      </Text>
+      <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
+        <code>{importError.stack_trace}</code>
+      </Text>
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx
index ae184c2f9fa25..b5ee4b32de90f 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/AllDeadlinesModal.tsx
@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, HStack, Separator, Skeleton, VStack } from "@chakra-ui/react";
+import { HStack, Separator, Skeleton, VStack } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { DeadlineAlertResponse } from "openapi/requests/types.gen";
 import { ErrorAlert } from "src/components/ErrorAlert";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { Pagination } from "src/components/ui/Pagination";
 import { useDeadlines } from "src/queries/useDeadlines";
 
@@ -61,45 +61,46 @@ export const AllDeadlinesModal = ({ alertMap, dagId, onClose, open }: AllDeadlin
   };
 
   return (
-    <Dialog.Root onOpenChange={onOpenChange} open={open} scrollBehavior="inside">
-      <Dialog.Content backdrop p={4}>
-        <Dialog.Header>
-          <Heading size="sm">{translate("overview.deadlines.title")}</Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body pb={2}>
-          <ErrorAlert error={error} />
-          {isLoading ? (
-            <VStack>
-              {Array.from({ length: PAGE_LIMIT }).map((_, idx) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <Skeleton height="36px" key={idx} width="100%" />
-              ))}
-            </VStack>
-          ) : (
-            <VStack gap={0} separator={<Separator />}>
-              {deadlines.map((deadline) => (
-                <DeadlineRow alert={getAlert(deadline.alert_id)} deadline={deadline} key={deadline.id} />
-              ))}
-            </VStack>
-          )}
-        </Dialog.Body>
-        {totalEntries > PAGE_LIMIT ? (
-          <Pagination.Root
-            count={totalEntries}
-            onPageChange={(event) => setPage(event.page)}
-            p={3}
-            page={page}
-            pageSize={PAGE_LIMIT}
-          >
-            <HStack justify="center">
-              <Pagination.PrevTrigger />
-              <Pagination.Items />
-              <Pagination.NextTrigger />
-            </HStack>
-          </Pagination.Root>
-        ) : undefined}
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal
+      footerProps={{
+        children:
+          totalEntries > PAGE_LIMIT ? (
+            <Pagination.Root
+              count={totalEntries}
+              onPageChange={(event) => setPage(event.page)}
+              padding={3}
+              page={page}
+              pageSize={PAGE_LIMIT}
+            >
+              <HStack justify="center">
+                <Pagination.PrevTrigger />
+                <Pagination.Items />
+                <Pagination.NextTrigger />
+              </HStack>
+            </Pagination.Root>
+          ) : undefined,
+        padding: 0,
+      }}
+      onOpenChange={onOpenChange}
+      open={open}
+      scrollBehavior="inside"
+      title={translate("overview.deadlines.title")}
+    >
+      <ErrorAlert error={error} />
+      {isLoading ? (
+        <VStack>
+          {Array.from({ length: PAGE_LIMIT }).map((_, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Skeleton height="36px" key={idx} width="100%" />
+          ))}
+        </VStack>
+      ) : (
+        <VStack gap={0} separator={<Separator />}>
+          {deadlines.map((deadline) => (
+            <DeadlineRow alert={getAlert(deadline.alert_id)} deadline={deadline} key={deadline.id} />
+          ))}
+        </VStack>
+      )}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkClearDagRunsButton.tsx b/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkClearDagRunsButton.tsx
index 99751c525a0b3..138c55bbb6af5 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkClearDagRunsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkClearDagRunsButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack, useDisclosure } from "@chakra-ui/react";
+import { Button, Flex, useDisclosure } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
@@ -24,7 +24,7 @@ import { CgRedo } from "react-icons/cg";
 import type { DAGRunResponse } from "openapi/requests/types.gen";
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { ActionErrors } from "src/components/ActionErrors";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { useBulkClearDagRuns } from "src/queries/useBulkClearDagRuns";
 import { useBulkClearDagRunsDryRun } from "src/queries/useBulkClearDagRunsDryRun";
@@ -64,55 +64,47 @@ const BulkClearDagRunsButton = ({ deselectKeys, selectedDagRuns }: Props) => {
         {translate("dags:runAndTaskActions.clear.button", { type: translate("dagRun_other") })}
       </Button>
 
-      <Dialog.Root onOpenChange={handleClose} open={open} size="xl">
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("dags:runAndTaskActions.clear.title", { type: translate("dagRun_other") })}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <Flex justifyContent="center" mb={4}>
-              <SegmentedControl
-                defaultValues={["existingTasks"]}
-                onChange={setSelectedOptions}
-                options={[
-                  {
-                    label: translate("dags:runAndTaskActions.options.existingTasks"),
-                    value: "existingTasks",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.onlyFailed"),
-                    value: "onlyFailed",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.queueNew"),
-                    value: "newTasks",
-                  },
-                ]}
-              />
-            </Flex>
-            <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
-            <ActionErrors error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                disabled={affectedTasks.total_entries === 0}
-                loading={isPending || isFetching}
-                onClick={() => {
-                  bulkClear(selectedDagRuns, { note, onlyFailed, onlyNew });
-                }}
-              >
-                <CgRedo />
-                {translate("modal.confirm")}
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        footerActions={
+          <Button
+            disabled={affectedTasks.total_entries === 0}
+            loading={isPending || isFetching}
+            onClick={() => {
+              bulkClear(selectedDagRuns, { note, onlyFailed, onlyNew });
+            }}
+          >
+            <CgRedo />
+            {translate("modal.confirm")}
+          </Button>
+        }
+        onOpenChange={handleClose}
+        open={open}
+        size="xl"
+        title={translate("dags:runAndTaskActions.clear.title", { type: translate("dagRun_other") })}
+      >
+        <Flex justifyContent="center" mb={4}>
+          <SegmentedControl
+            defaultValues={["existingTasks"]}
+            onChange={setSelectedOptions}
+            options={[
+              {
+                label: translate("dags:runAndTaskActions.options.existingTasks"),
+                value: "existingTasks",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.onlyFailed"),
+                value: "onlyFailed",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.queueNew"),
+                value: "newTasks",
+              },
+            ]}
+          />
+        </Flex>
+        <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
+        <ActionErrors error={error} />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkDeleteDagRunsButton.tsx b/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkDeleteDagRunsButton.tsx
index bedd0739e6b42..f8f1df5085f39 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkDeleteDagRunsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkDeleteDagRunsButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import { Box, Button, Text, useDisclosure } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
@@ -27,7 +27,7 @@ import { ActionErrors } from "src/components/ActionErrors";
 import { DataTable } from "src/components/DataTable";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
-import { Accordion, Dialog } from "src/components/ui";
+import { Accordion, Modal } from "src/components/ui";
 import { useBulkDeleteDagRuns } from "src/queries/useBulkDeleteDagRuns";
 
 type Props = {
@@ -86,89 +86,81 @@ const BulkDeleteDagRunsButton = ({ deselectKeys, selectedDagRuns }: Props) => {
         {translate("dags:runAndTaskActions.delete.button", { type: translate("dagRun_other") })}
       </Button>
 
-      <Dialog.Root onOpenChange={onClose} open={open} size="xl">
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("dags:runAndTaskActions.delete.dialog.title", {
-                  type: translate("dagRun_other"),
-                })}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
+      <Modal
+        footerActions={
+          <Button
+            colorPalette="danger"
+            loading={isPending}
+            onClick={() => {
+              bulkAction({
+                actions: [
+                  {
+                    action: "delete" as const,
+                    action_on_non_existence: "skip",
+                    entities: selectedDagRuns.map((dagRun) => ({
+                      dag_id: dagRun.dag_id,
+                      dag_run_id: dagRun.dag_run_id,
+                    })),
+                  },
+                ],
+              });
+            }}
+          >
+            <FiTrash2 />
+            <Text fontWeight="bold">{translate("modal.confirm")}</Text>
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        size="xl"
+        title={translate("dags:runAndTaskActions.delete.dialog.title", {
+          type: translate("dagRun_other"),
+        })}
+      >
+        <Text color="fg.subtle" fontSize="sm" mb={4}>
+          {translate("dags:runAndTaskActions.delete.dialog.warning", {
+            type: translate("dagRun_other"),
+          })}
+        </Text>
 
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <Text color="fg.subtle" fontSize="sm" mb={4}>
-              {translate("dags:runAndTaskActions.delete.dialog.warning", {
-                type: translate("dagRun_other"),
-              })}
-            </Text>
+        <Box maxH="400px" overflowY="auto">
+          {isGrouped ? (
+            <Accordion.Root collapsible multiple variant="enclosed">
+              {[...byDagId.entries()].map(([dagId, dagRuns]) => (
+                <Accordion.Item key={dagId} value={dagId}>
+                  <Accordion.ItemTrigger>
+                    <Text fontSize="sm" fontWeight="semibold">
+                      {translate("dagId")}: {dagId}{" "}
+                      <Text as="span" color="fg.subtle" fontWeight="normal">
+                        ({dagRuns.length})
+                      </Text>
+                    </Text>
+                  </Accordion.ItemTrigger>
+                  <Accordion.ItemContent>
+                    <DataTable
+                      columns={columns}
+                      data={dagRuns}
+                      displayMode="table"
+                      modelName="common:dagRun"
+                      total={dagRuns.length}
+                    />
+                  </Accordion.ItemContent>
+                </Accordion.Item>
+              ))}
+            </Accordion.Root>
+          ) : (
+            <DataTable
+              columns={columns}
+              data={selectedDagRuns}
+              displayMode="table"
+              modelName="common:dagRun"
+              total={selectedDagRuns.length}
+            />
+          )}
+        </Box>
 
-            <Box maxH="400px" overflowY="auto">
-              {isGrouped ? (
-                <Accordion.Root collapsible multiple variant="enclosed">
-                  {[...byDagId.entries()].map(([dagId, dagRuns]) => (
-                    <Accordion.Item key={dagId} value={dagId}>
-                      <Accordion.ItemTrigger>
-                        <Text fontSize="sm" fontWeight="semibold">
-                          {translate("dagId")}: {dagId}{" "}
-                          <Text as="span" color="fg.subtle" fontWeight="normal">
-                            ({dagRuns.length})
-                          </Text>
-                        </Text>
-                      </Accordion.ItemTrigger>
-                      <Accordion.ItemContent>
-                        <DataTable
-                          columns={columns}
-                          data={dagRuns}
-                          displayMode="table"
-                          modelName="common:dagRun"
-                          total={dagRuns.length}
-                        />
-                      </Accordion.ItemContent>
-                    </Accordion.Item>
-                  ))}
-                </Accordion.Root>
-              ) : (
-                <DataTable
-                  columns={columns}
-                  data={selectedDagRuns}
-                  displayMode="table"
-                  modelName="common:dagRun"
-                  total={selectedDagRuns.length}
-                />
-              )}
-            </Box>
-
-            <ActionErrors actionResponse={data?.delete} error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                colorPalette="danger"
-                loading={isPending}
-                onClick={() => {
-                  bulkAction({
-                    actions: [
-                      {
-                        action: "delete" as const,
-                        action_on_non_existence: "skip",
-                        entities: selectedDagRuns.map((dagRun) => ({
-                          dag_id: dagRun.dag_id,
-                          dag_run_id: dagRun.dag_run_id,
-                        })),
-                      },
-                    ],
-                  });
-                }}
-              >
-                <FiTrash2 />
-                <Text fontWeight="bold">{translate("modal.confirm")}</Text>
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+        <ActionErrors actionResponse={data?.delete} error={error} />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkMarkDagRunsAsButton.tsx b/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkMarkDagRunsAsButton.tsx
index cb08961d80a65..bd8171384ed65 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkMarkDagRunsAsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagRuns/BulkMarkDagRunsAsButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Badge, Box, Button, Flex, Heading, HStack, VStack, useDisclosure } from "@chakra-ui/react";
+import { Badge, Box, Button, HStack, useDisclosure } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FiX } from "react-icons/fi";
@@ -27,7 +27,7 @@ import { ActionAccordion } from "src/components/ActionAccordion";
 import { ActionErrors } from "src/components/ActionErrors";
 import { allowedStates } from "src/components/MarkAs/utils";
 import { StateBadge } from "src/components/StateBadge";
-import { Dialog, Menu } from "src/components/ui";
+import { Modal, Menu } from "src/components/ui";
 import { useBulkPatchDagRun } from "src/queries/useBulkPatchDagRun";
 
 type Props = {
@@ -79,50 +79,45 @@ const BulkMarkDagRunsAsButton = ({ deselectKeys, selectedDagRuns }: Props) => {
         </Menu.Content>
       </Menu.Root>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("dags:runAndTaskActions.markAs.title", {
-                  state,
-                  type: translate("dagRun_other"),
-                })}{" "}
-                <StateBadge state={state} />
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <ActionAccordion note={note} setNote={setNote} />
-            <ActionErrors actionResponse={data?.update} error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                loading={isPending}
-                onClick={() => {
-                  bulkAction({
-                    actions: [
-                      {
-                        action: "update" as const,
-                        action_on_non_existence: "skip",
-                        entities: selectedDagRuns.map((dagRun) => ({
-                          dag_id: dagRun.dag_id,
-                          dag_run_id: dagRun.dag_run_id,
-                          note,
-                          state,
-                        })),
-                      },
-                    ],
-                  });
-                }}
-              >
-                {translate("modal.confirm")}
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        footerActions={
+          <Button
+            loading={isPending}
+            onClick={() => {
+              bulkAction({
+                actions: [
+                  {
+                    action: "update" as const,
+                    action_on_non_existence: "skip",
+                    entities: selectedDagRuns.map((dagRun) => ({
+                      dag_id: dagRun.dag_id,
+                      dag_run_id: dagRun.dag_run_id,
+                      note,
+                      state,
+                    })),
+                  },
+                ],
+              });
+            }}
+          >
+            {translate("modal.confirm")}
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={
+          <>
+            {translate("dags:runAndTaskActions.markAs.title", {
+              state,
+              type: translate("dagRun_other"),
+            })}{" "}
+            <StateBadge state={state} />
+          </>
+        }
+      >
+        <ActionAccordion note={note} setNote={setNote} />
+        <ActionErrors actionResponse={data?.update} error={error} />
+      </Modal>
     </Box>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.test.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.test.tsx
index bad26fe378d6d..37ef3b4c390f5 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.test.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.test.tsx
@@ -44,37 +44,29 @@ vi.mock("src/queries/useConfig", () => ({
 
 vi.mock("src/components/ui", async (importOriginal) => {
   const actual = await importOriginal<typeof Ui>();
-  // Must stay inside the factory: vitest hoists vi.mock above module scope, so an outer-scope
-  // component cannot be referenced here.
-  // eslint-disable-next-line unicorn/consistent-function-scoping
-  const DialogPart = ({ children }: { readonly children?: ReactNode }) => <div>{children}</div>;
 
   return {
     ...actual,
-    Dialog: {
-      ...actual.Dialog,
-      Body: DialogPart,
-      CloseTrigger: () => undefined,
-      Content: DialogPart,
-      Header: DialogPart,
-      Root: ({
-        children,
-        onOpenChange,
-        open,
-      }: {
-        readonly children?: ReactNode;
-        readonly onOpenChange?: () => void;
-        readonly open?: boolean;
-      }) =>
-        open ? (
-          <div>
-            <button onClick={onOpenChange} type="button">
-              close dialog
-            </button>
-            {children}
-          </div>
-        ) : undefined,
-    },
+    Modal: ({
+      children,
+      onOpenChange,
+      open,
+      title,
+    }: {
+      readonly children?: ReactNode;
+      readonly onOpenChange?: () => void;
+      readonly open?: boolean;
+      readonly title?: ReactNode;
+    }) =>
+      open ? (
+        <div>
+          <button onClick={onOpenChange} type="button">
+            close dialog
+          </button>
+          {title}
+          {children}
+        </div>
+      ) : undefined,
   };
 });
 
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.tsx
index 8f5d6140d3bc1..fd81c7e9cca5c 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/PartitionScheduleModal.tsx
@@ -29,7 +29,7 @@ import { DataTable } from "src/components/DataTable";
 import type { TableState } from "src/components/DataTable/types";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { useConfig } from "src/queries/useConfig";
 
 type PartitionScheduleModalProps = {
@@ -106,30 +106,33 @@ export const PartitionScheduleModal = ({ dagId, onClose, open }: PartitionSchedu
   };
 
   return (
-    <Dialog.Root lazyMount onOpenChange={handleOpenChange} open={open} scrollBehavior="inside" unmountOnExit>
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <HStack>
+    <Modal
+      headerProps={{
+        children: (
+          <HStack gap={2}>
             <FiDatabase />
-            <Heading size="md">{translate("pendingDagRun", { count: total })}</Heading>
+            <Heading fontSize="lg">{translate("pendingDagRun", { count: total })}</Heading>
           </HStack>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          <ErrorAlert error={error} />
-          <DataTable
-            columns={columns}
-            data={partitionedDagRuns}
-            hideRowCountHeading
-            initialState={tableState}
-            isFetching={isFetching}
-            isLoading={isLoading}
-            modelName="partitionedDagRun"
-            onStateChange={(state) => setPageIndex(state.pagination.pageIndex)}
-            total={total}
-          />
-        </Dialog.Body>
-      </Dialog.Content>
-    </Dialog.Root>
+        ),
+      }}
+      lazyMount
+      onOpenChange={handleOpenChange}
+      open={open}
+      scrollBehavior="inside"
+      unmountOnExit
+    >
+      <ErrorAlert error={error} />
+      <DataTable
+        columns={columns}
+        data={partitionedDagRuns}
+        hideRowCountHeading
+        initialState={tableState}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        modelName="partitionedDagRun"
+        onStateChange={(state) => setPageIndex(state.pagination.pageIndex)}
+        total={total}
+      />
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DagImportErrorsModal.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DagImportErrorsModal.tsx
index ccb60b8594df3..6a1a142966913 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DagImportErrorsModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DagImportErrorsModal.tsx
@@ -25,7 +25,7 @@ import { PiFilePy } from "react-icons/pi";
 import { useImportErrorServiceGetImportErrors } from "openapi/queries";
 import { SearchBar } from "src/components/SearchBar";
 import Time from "src/components/Time";
-import { Accordion, ClipboardIconButton, Dialog } from "src/components/ui";
+import { Accordion, ClipboardIconButton, Modal } from "src/components/ui";
 import { Pagination } from "src/components/ui/Pagination";
 
 type ImportDAGErrorModalProps = {
@@ -63,73 +63,81 @@ export const DagImportErrorsModal = ({ onClose, open }: ImportDAGErrorModalProps
   };
 
   return (
-    <Dialog.Root onOpenChange={onOpenChange} open={open} scrollBehavior="inside">
-      <Dialog.Content backdrop p={4}>
-        <Dialog.Header display="flex" justifyContent="space-between">
-          <HStack fontSize="xl">
-            <LuFileWarning />
-            <Heading>{translate("importErrors.dagImportError", { count: data?.total_entries ?? 0 })}</Heading>
-          </HStack>
-          <SearchBar
-            defaultValue={searchQuery}
-            onChange={handleSearchChange}
-            placeholder={translate("importErrors.searchByFile")}
-          />
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body>
-          <Accordion.Root collapsible multiple size="md" variant="enclosed">
-            {(data?.import_errors ?? []).map((importError) => (
-              <Accordion.Item key={importError.import_error_id} value={String(importError.import_error_id)}>
-                <HStack align="stretch" gap={0} w="100%">
-                  <Accordion.ItemTrigger cursor="pointer" flex="1">
-                    <HStack alignItems="center" flexWrap="wrap" gap={2} w="100%">
-                      <Text display="flex" fontWeight="bold">
-                        {translate("components:versionDetails.bundleName")}
-                        {": "}
-                        {importError.bundle_name}
-                      </Text>
-                      <PiFilePy />
-                      {importError.filename}
-                    </HStack>
-                  </Accordion.ItemTrigger>
-                  <Box alignItems="center" display="flex" flexShrink={0} pr={2}>
-                    <ClipboardRoot value={importError.filename}>
-                      <ClipboardIconButton variant="outline" />
-                    </ClipboardRoot>
-                  </Box>
-                </HStack>
-                <Accordion.ItemContent>
-                  <Text color="fg.muted" fontSize="sm" mb={1}>
-                    {translate("importErrors.timestamp")}
+    <Modal
+      footerProps={{
+        children: (
+          <Pagination.Root
+            count={data?.total_entries ?? 0}
+            onPageChange={(event) => setPage(event.page)}
+            padding={4}
+            page={page}
+            pageSize={PAGE_LIMIT}
+          >
+            <HStack>
+              <Pagination.PrevTrigger />
+              <Pagination.Items />
+              <Pagination.NextTrigger />
+            </HStack>
+          </Pagination.Root>
+        ),
+      }}
+      headerProps={{
+        children: (
+          <>
+            <HStack fontSize="xl">
+              <LuFileWarning />
+              <Heading>
+                {translate("importErrors.dagImportError", { count: data?.total_entries ?? 0 })}
+              </Heading>
+            </HStack>
+            <SearchBar
+              defaultValue={searchQuery}
+              onChange={handleSearchChange}
+              placeholder={translate("importErrors.searchByFile")}
+            />
+          </>
+        ),
+        display: "flex",
+        justifyContent: "space-between",
+      }}
+      onOpenChange={onOpenChange}
+      open={open}
+      scrollBehavior="inside"
+    >
+      <Accordion.Root collapsible multiple size="md" variant="enclosed">
+        {(data?.import_errors ?? []).map((importError) => (
+          <Accordion.Item key={importError.import_error_id} value={String(importError.import_error_id)}>
+            <HStack align="stretch" gap={0} w="100%">
+              <Accordion.ItemTrigger cursor="pointer" flex="1">
+                <HStack alignItems="center" flexWrap="wrap" gap={2} w="100%">
+                  <Text display="flex" fontWeight="bold">
+                    {translate("components:versionDetails.bundleName")}
                     {": "}
-                    <Time datetime={importError.timestamp} />
+                    {importError.bundle_name}
                   </Text>
-                  <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
-                    <code>{importError.stack_trace}</code>
-                  </Text>
-                </Accordion.ItemContent>
-              </Accordion.Item>
-            ))}
-          </Accordion.Root>
-        </Dialog.Body>
-
-        <Pagination.Root
-          count={data?.total_entries ?? 0}
-          onPageChange={(event) => setPage(event.page)}
-          p={4}
-          page={page}
-          pageSize={PAGE_LIMIT}
-        >
-          <HStack>
-            <Pagination.PrevTrigger />
-            <Pagination.Items />
-            <Pagination.NextTrigger />
-          </HStack>
-        </Pagination.Root>
-      </Dialog.Content>
-    </Dialog.Root>
+                  <PiFilePy />
+                  {importError.filename}
+                </HStack>
+              </Accordion.ItemTrigger>
+              <Box alignItems="center" display="flex" flexShrink={0} pr={2}>
+                <ClipboardRoot value={importError.filename}>
+                  <ClipboardIconButton variant="outline" />
+                </ClipboardRoot>
+              </Box>
+            </HStack>
+            <Accordion.ItemContent>
+              <Text color="fg.muted" fontSize="sm" mb={1}>
+                {translate("importErrors.timestamp")}
+                {": "}
+                <Time datetime={importError.timestamp} />
+              </Text>
+              <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
+                <code>{importError.stack_trace}</code>
+              </Text>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
index 03efc2454f1a3..a882295fb54e0 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrorsModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, ClipboardRoot, Heading, Text, HStack } from "@chakra-ui/react";
+import { Box, ClipboardRoot, Heading, HStack, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { LuFileWarning } from "react-icons/lu";
@@ -24,7 +24,7 @@ import { PiFilePy } from "react-icons/pi";
 
 import type { PluginImportErrorResponse } from "openapi/requests/types.gen";
 import { SearchBar } from "src/components/SearchBar";
-import { Accordion, ClipboardIconButton, Dialog } from "src/components/ui";
+import { Accordion, ClipboardIconButton, Modal } from "src/components/ui";
 import { Pagination } from "src/components/ui/Pagination";
 
 type PluginImportErrorsModalProps = {
@@ -60,65 +60,71 @@ export const PluginImportErrorsModal = ({ importErrors, onClose, open }: PluginI
   }, [searchQuery, importErrors]);
 
   return (
-    <Dialog.Root onOpenChange={onOpenChange} open={open} scrollBehavior="inside">
-      <Dialog.Content backdrop p={4}>
-        <Dialog.Header display="flex" justifyContent="space-between">
-          <HStack fontSize="xl">
-            <LuFileWarning />
-            <Heading>{translate("plugins.importError_one")}</Heading>
-          </HStack>
-          <SearchBar
-            defaultValue={searchQuery}
-            onChange={setSearchQuery}
-            placeholder={translate("plugins.searchPlaceholder")}
-          />
-        </Dialog.Header>
-
-        <Dialog.CloseTrigger />
-
-        <Dialog.Body>
-          <Accordion.Root collapsible multiple size="md" variant="enclosed">
-            {visibleItems.map((importError) => (
-              <Accordion.Item key={importError.error} value={importError.source}>
-                <HStack align="stretch" gap={0} w="100%">
-                  <Accordion.ItemTrigger cursor="pointer" flex="1">
-                    <HStack alignItems="center" gap={2} minW={0} w="100%">
-                      <PiFilePy />
-                      <Text minW={0} overflowWrap="anywhere">
-                        {importError.source}
-                      </Text>
-                    </HStack>
-                  </Accordion.ItemTrigger>
-                  <Box alignItems="center" display="flex" flexShrink={0} pr={2}>
-                    <ClipboardRoot value={importError.source}>
-                      <ClipboardIconButton variant="outline" />
-                    </ClipboardRoot>
-                  </Box>
-                </HStack>
-                <Accordion.ItemContent>
-                  <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
-                    <code>{importError.error}</code>
+    <Modal
+      footerProps={{
+        children: (
+          <Pagination.Root
+            count={filteredErrors.length}
+            onPageChange={(event) => setPage(event.page)}
+            padding={4}
+            page={page}
+            pageSize={PAGE_LIMIT}
+          >
+            <HStack>
+              <Pagination.PrevTrigger />
+              <Pagination.Items />
+              <Pagination.NextTrigger />
+            </HStack>
+          </Pagination.Root>
+        ),
+      }}
+      headerProps={{
+        children: (
+          <>
+            <HStack gap={2}>
+              <LuFileWarning />
+              <Heading fontSize="lg">{translate("plugins.importError_one")}</Heading>
+            </HStack>
+            <SearchBar
+              defaultValue={searchQuery}
+              onChange={setSearchQuery}
+              placeholder={translate("plugins.searchPlaceholder")}
+            />
+          </>
+        ),
+        display: "flex",
+        justifyContent: "space-between",
+      }}
+      onOpenChange={onOpenChange}
+      open={open}
+      scrollBehavior="inside"
+    >
+      <Accordion.Root collapsible multiple size="md" variant="enclosed">
+        {visibleItems.map((importError) => (
+          <Accordion.Item key={importError.error} value={importError.source}>
+            <HStack align="stretch" gap={0} w="100%">
+              <Accordion.ItemTrigger cursor="pointer" flex="1">
+                <HStack alignItems="center" gap={2} minW={0} w="100%">
+                  <PiFilePy />
+                  <Text minW={0} overflowWrap="anywhere">
+                    {importError.source}
                   </Text>
-                </Accordion.ItemContent>
-              </Accordion.Item>
-            ))}
-          </Accordion.Root>
-        </Dialog.Body>
-
-        <Pagination.Root
-          count={filteredErrors.length}
-          onPageChange={(event) => setPage(event.page)}
-          p={4}
-          page={page}
-          pageSize={PAGE_LIMIT}
-        >
-          <HStack>
-            <Pagination.PrevTrigger />
-            <Pagination.Items />
-            <Pagination.NextTrigger />
-          </HStack>
-        </Pagination.Root>
-      </Dialog.Content>
-    </Dialog.Root>
+                </HStack>
+              </Accordion.ItemTrigger>
+              <Box alignItems="center" display="flex" flexShrink={0} pr={2}>
+                <ClipboardRoot value={importError.source}>
+                  <ClipboardIconButton variant="outline" />
+                </ClipboardRoot>
+              </Box>
+            </HStack>
+            <Accordion.ItemContent>
+              <Text color="fg.error" fontSize="sm" whiteSpace="pre-wrap">
+                <code>{importError.error}</code>
+              </Text>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Pools/AddPoolButton.tsx b/airflow-core/src/airflow/ui/src/pages/Pools/AddPoolButton.tsx
index 875a8f92ca10c..f0ad07521a0ce 100644
--- a/airflow-core/src/airflow/ui/src/pages/Pools/AddPoolButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Pools/AddPoolButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Heading, useDisclosure } from "@chakra-ui/react";
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { MdAdd } from "react-icons/md";
 
-import { Dialog, Toaster } from "src/components/ui";
+import { Modal, Toaster } from "src/components/ui";
 import { useAddPool } from "src/queries/useAddPool";
 
 import PoolForm, { type PoolBody } from "./PoolForm";
@@ -52,25 +52,15 @@ const AddPoolButton = () => {
         <MdAdd /> {translate("pools.add")}
       </Button>
 
-      <Dialog.Root onOpenChange={handleClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <Heading size="xl">{translate("pools.add")}</Heading>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <PoolForm
-              error={error}
-              initialPool={initialPoolValue}
-              isPending={isPending}
-              manageMutate={addPool}
-              setError={setError}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal onOpenChange={handleClose} open={open} title={translate("pools.add")}>
+        <PoolForm
+          error={error}
+          initialPool={initialPoolValue}
+          isPending={isPending}
+          manageMutate={addPool}
+          setError={setError}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Pools/EditPoolButton.tsx b/airflow-core/src/airflow/ui/src/pages/Pools/EditPoolButton.tsx
index 6036f5714d6a7..2a34bd23da6e5 100644
--- a/airflow-core/src/airflow/ui/src/pages/Pools/EditPoolButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Pools/EditPoolButton.tsx
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiEdit } from "react-icons/fi";
 
 import type { PoolResponse } from "openapi/requests/types.gen";
-import { IconButton, Dialog } from "src/components/ui";
+import { IconButton, Modal } from "src/components/ui";
 import { useEditPool } from "src/queries/useEditPool";
 
 import PoolForm, { type PoolBody } from "./PoolForm";
@@ -55,25 +55,15 @@ const EditPoolButton = ({ pool }: Props) => {
         <FiEdit />
       </IconButton>
 
-      <Dialog.Root onOpenChange={handleClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <Heading size="xl">{translate("pools.edit")}</Heading>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <PoolForm
-              error={error}
-              initialPool={initialPoolValue}
-              isPending={isPending}
-              manageMutate={editPool}
-              setError={setError}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal onOpenChange={handleClose} open={open} title={translate("pools.edit")}>
+        <PoolForm
+          error={error}
+          initialPool={initialPoolValue}
+          isPending={isPending}
+          manageMutate={editPool}
+          setError={setError}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Run/DeadlineStatusModal.tsx b/airflow-core/src/airflow/ui/src/pages/Run/DeadlineStatusModal.tsx
index c5afe117eb4d5..56d7d2fb7edf9 100644
--- a/airflow-core/src/airflow/ui/src/pages/Run/DeadlineStatusModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Run/DeadlineStatusModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Badge, Heading, HStack, Separator, Skeleton, Text, VStack } from "@chakra-ui/react";
+import { Badge, HStack, Separator, Skeleton, Text, VStack } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -26,7 +26,7 @@ import { useDeadlinesServiceGetDeadlines } from "openapi/queries";
 import type { DeadlineAlertResponse } from "openapi/requests/types.gen";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { Pagination } from "src/components/ui/Pagination";
 import { renderDuration } from "src/utils/datetimeUtils";
 import { translateCompletionRule } from "src/utils/deadlines";
@@ -75,106 +75,108 @@ export const DeadlineStatusModal = ({
   };
 
   return (
-    <Dialog.Root onOpenChange={onOpenChange} open={open} scrollBehavior="inside" size="md">
-      <Dialog.Content backdrop p={4}>
-        <Dialog.Header>
-          <Heading size="sm">{translate("deadlineStatus.label")}</Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body pb={2}>
-          <ErrorAlert error={error} />
-          {isLoading ? (
-            <VStack>
-              {Array.from({ length: PAGE_LIMIT }).map((_, idx) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <Skeleton height="52px" key={idx} width="100%" />
-              ))}
-            </VStack>
-          ) : (
-            <VStack gap={0} separator={<Separator />}>
-              {deadlines.map((dl) => {
-                const alert =
-                  dl.alert_id !== undefined && dl.alert_id !== null ? alertMap.get(dl.alert_id) : undefined;
-                const completionRule = translateCompletionRule(translate, alert);
-                const deadlineTime = dayjs(dl.deadline_time);
+    <Modal
+      footerProps={{
+        children:
+          totalEntries > PAGE_LIMIT ? (
+            <Pagination.Root
+              count={totalEntries}
+              onPageChange={(event) => setPage(event.page)}
+              padding={3}
+              page={page}
+              pageSize={PAGE_LIMIT}
+            >
+              <HStack justify="center">
+                <Pagination.PrevTrigger />
+                <Pagination.Items />
+                <Pagination.NextTrigger />
+              </HStack>
+            </Pagination.Root>
+          ) : undefined,
+        padding: 0,
+      }}
+      onOpenChange={onOpenChange}
+      open={open}
+      scrollBehavior="inside"
+      size="md"
+      title={translate("deadlineStatus.label")}
+    >
+      <ErrorAlert error={error} />
+      {isLoading ? (
+        <VStack>
+          {Array.from({ length: PAGE_LIMIT }).map((_, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Skeleton height="52px" key={idx} width="100%" />
+          ))}
+        </VStack>
+      ) : (
+        <VStack gap={0} separator={<Separator />}>
+          {deadlines.map((dl) => {
+            const alert =
+              dl.alert_id !== undefined && dl.alert_id !== null ? alertMap.get(dl.alert_id) : undefined;
+            const completionRule = translateCompletionRule(translate, alert);
+            const deadlineTime = dayjs(dl.deadline_time);
 
-                let actualDurationLabel: string | undefined;
+            let actualDurationLabel: string | undefined;
 
-                if (dl.missed && runEndDate !== undefined) {
-                  const diff = dayjs(runEndDate).diff(deadlineTime);
-                  const dur = renderDuration(Math.abs(diff) / 1000, false);
+            if (dl.missed && runEndDate !== undefined) {
+              const diff = dayjs(runEndDate).diff(deadlineTime);
+              const dur = renderDuration(Math.abs(diff) / 1000, false);
 
-                  if (dur !== undefined) {
-                    actualDurationLabel =
-                      diff >= 0
-                        ? translate("deadlineStatus.finishedLate", { duration: dur })
-                        : translate("deadlineStatus.finishedEarly", { duration: dur });
-                  }
-                }
+              if (dur !== undefined) {
+                actualDurationLabel =
+                  diff >= 0
+                    ? translate("deadlineStatus.finishedLate", { duration: dur })
+                    : translate("deadlineStatus.finishedEarly", { duration: dur });
+              }
+            }
 
-                return (
-                  <VStack alignItems="flex-start" gap={0.5} key={dl.id} px={2} py={1.5} width="100%">
-                    <HStack gap={2}>
-                      <Badge colorPalette={dl.missed ? "red" : "blue"} size="sm" variant="solid">
-                        {dl.missed ? <FiAlertTriangle /> : <FiClock />}
-                        {translate(dl.missed ? "deadlineStatus.missed" : "deadlineStatus.upcoming")}
-                      </Badge>
-                      {Boolean(dl.alert_name) && (
-                        <Text color="fg.muted" fontSize="xs">
-                          {dl.alert_name}
-                        </Text>
-                      )}
-                    </HStack>
-                    {completionRule === undefined ? undefined : (
-                      <Text color="fg.muted" fontSize="xs">
-                        {completionRule}
-                      </Text>
-                    )}
-                    <HStack gap={1}>
-                      <Text color="fg.muted" fontSize="xs">
-                        {translate("deadlineStatus.expected")}:
-                      </Text>
-                      <Time datetime={dl.deadline_time} fontSize="xs" />
-                    </HStack>
-                    <HStack gap={1}>
-                      <Text color="fg.muted" fontSize="xs">
-                        {translate("deadlineStatus.actual")}:
-                      </Text>
-                      {runEndDate === undefined ? (
-                        <Text color="fg.muted" fontSize="xs">
-                          {translate("deadlineStatus.stillRunning")}
-                        </Text>
-                      ) : (
-                        <Time datetime={runEndDate} fontSize="xs" />
-                      )}
-                    </HStack>
-                    {actualDurationLabel === undefined ? undefined : (
-                      <Text color="fg.error" fontSize="xs" pl={1}>
-                        {actualDurationLabel}
-                      </Text>
-                    )}
-                  </VStack>
-                );
-              })}
-            </VStack>
-          )}
-        </Dialog.Body>
-        {totalEntries > PAGE_LIMIT ? (
-          <Pagination.Root
-            count={totalEntries}
-            onPageChange={(event) => setPage(event.page)}
-            p={3}
-            page={page}
-            pageSize={PAGE_LIMIT}
-          >
-            <HStack justify="center">
-              <Pagination.PrevTrigger />
-              <Pagination.Items />
-              <Pagination.NextTrigger />
-            </HStack>
-          </Pagination.Root>
-        ) : undefined}
-      </Dialog.Content>
-    </Dialog.Root>
+            return (
+              <VStack alignItems="flex-start" gap={0.5} key={dl.id} px={2} py={1.5} width="100%">
+                <HStack gap={2}>
+                  <Badge colorPalette={dl.missed ? "red" : "blue"} size="sm" variant="solid">
+                    {dl.missed ? <FiAlertTriangle /> : <FiClock />}
+                    {translate(dl.missed ? "deadlineStatus.missed" : "deadlineStatus.upcoming")}
+                  </Badge>
+                  {Boolean(dl.alert_name) && (
+                    <Text color="fg.muted" fontSize="xs">
+                      {dl.alert_name}
+                    </Text>
+                  )}
+                </HStack>
+                {completionRule === undefined ? undefined : (
+                  <Text color="fg.muted" fontSize="xs">
+                    {completionRule}
+                  </Text>
+                )}
+                <HStack gap={1}>
+                  <Text color="fg.muted" fontSize="xs">
+                    {translate("deadlineStatus.expected")}:
+                  </Text>
+                  <Time datetime={dl.deadline_time} fontSize="xs" />
+                </HStack>
+                <HStack gap={1}>
+                  <Text color="fg.muted" fontSize="xs">
+                    {translate("deadlineStatus.actual")}:
+                  </Text>
+                  {runEndDate === undefined ? (
+                    <Text color="fg.muted" fontSize="xs">
+                      {translate("deadlineStatus.stillRunning")}
+                    </Text>
+                  ) : (
+                    <Time datetime={runEndDate} fontSize="xs" />
+                  )}
+                </HStack>
+                {actualDurationLabel === undefined ? undefined : (
+                  <Text color="fg.error" fontSize="xs" pl={1}>
+                    {actualDurationLabel}
+                  </Text>
+                )}
+              </VStack>
+            );
+          })}
+        </VStack>
+      )}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/Logs.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/Logs.tsx
index fc52982e803cc..976c5b3255ba9 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/Logs.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/Logs.tsx
@@ -23,7 +23,7 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { useLocalStorage } from "usehooks-ts";
 
 import { useTaskInstanceServiceGetMappedTaskInstance } from "openapi/queries";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { LOG_SHOW_SOURCE_KEY, LOG_SHOW_TIMESTAMP_KEY, LOG_WRAP_KEY } from "src/constants/localStorage";
 import { SearchParamsKeys } from "src/constants/searchParams";
 import { SHORTCUTS } from "src/context/keyboardShortcuts";
@@ -246,26 +246,26 @@ export const Logs = () => {
         )
       ) : undefined}
       <TaskLogContent {...logContentProps} />
-      <Dialog.Root onOpenChange={onOpenChange} open={fullscreen} scrollBehavior="inside" size="full">
-        {fullscreen ? (
-          <Dialog.Content backdrop>
-            <Dialog.Header width="100%">
-              <Box display="flex" flexDirection="column" width="100%">
-                <Heading mb={2} size="xl">
-                  {taskId}
-                </Heading>
-                <TaskLogHeader {...logHeaderProps} isFullscreen />
-              </Box>
-            </Dialog.Header>
-
-            <Dialog.CloseTrigger />
-
-            <Dialog.Body display="flex" flexDirection="column">
-              <TaskLogContent {...logContentProps} />
-            </Dialog.Body>
-          </Dialog.Content>
-        ) : undefined}
-      </Dialog.Root>
+      <Modal
+        bodyProps={{ display: "flex", flexDirection: "column" }}
+        headerProps={{
+          children: (
+            <Box display="flex" flexDirection="column" width="100%">
+              <Heading mb={2} size="xl">
+                {taskId}
+              </Heading>
+              <TaskLogHeader {...logHeaderProps} isFullscreen />
+            </Box>
+          ),
+          width: "100%",
+        }}
+        onOpenChange={onOpenChange}
+        open={fullscreen}
+        scrollBehavior="inside"
+        size="full"
+      >
+        <TaskLogContent {...logContentProps} />
+      </Modal>
     </Box>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkClearTaskInstancesButton.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkClearTaskInstancesButton.tsx
index d9ba014dcbf21..0e052939f9a36 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkClearTaskInstancesButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkClearTaskInstancesButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Flex, Heading, VStack, useDisclosure } from "@chakra-ui/react";
+import { Button, Flex, useDisclosure } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
@@ -24,7 +24,7 @@ import { CgRedo } from "react-icons/cg";
 import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ActionAccordion } from "src/components/ActionAccordion";
 import { ErrorAlert } from "src/components/ErrorAlert";
-import { Checkbox, Dialog } from "src/components/ui";
+import { Checkbox, Modal } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { useBulkClearDryRun } from "src/queries/useBulkClearDryRun";
 import { useBulkClearTaskInstances } from "src/queries/useBulkClearTaskInstances";
@@ -73,82 +73,73 @@ const BulkClearTaskInstancesButton = ({ clearSelections, selectedTaskInstances }
         {translate("dags:runAndTaskActions.clear.button", { type: translate("taskInstance_other") })}
       </Button>
 
-      <Dialog.Root onOpenChange={handleClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("dags:runAndTaskActions.clear.title", {
-                  type: translate("taskInstance_other"),
-                })}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <Flex justifyContent="center" mb={4}>
-              <SegmentedControl
-                defaultValues={["downstream"]}
-                multiple
-                onChange={setSelectedOptions}
-                options={[
-                  {
-                    disabled: !hasLogicalDate,
-                    label: translate("dags:runAndTaskActions.options.past"),
-                    value: "past",
-                  },
-                  {
-                    disabled: !hasLogicalDate,
-                    label: translate("dags:runAndTaskActions.options.future"),
-                    value: "future",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.upstream"),
-                    value: "upstream",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.downstream"),
-                    value: "downstream",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.onlyFailed"),
-                    value: "onlyFailed",
-                  },
-                ]}
-              />
-            </Flex>
-            <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
-            <ErrorAlert error={error} />
-            <Flex alignItems="center" justifyContent="space-between" mt={3}>
-              <Checkbox
-                checked={preventRunningTask}
-                onCheckedChange={(event) => setPreventRunningTask(Boolean(event.checked))}
-              >
-                {translate("dags:runAndTaskActions.options.preventRunningTasks")}
-              </Checkbox>
-              <Button
-                disabled={affectedTasks.total_entries === 0}
-                loading={isPending || isFetching}
-                onClick={() => {
-                  void bulkClear(selectedTaskInstances, {
-                    includeDownstream: downstream,
-                    includeFuture: future,
-                    includeOnlyFailed: onlyFailed,
-                    includePast: past,
-                    includeUpstream: upstream,
-                    note,
-                    preventRunningTask,
-                  });
-                }}
-              >
-                <CgRedo />
-                {translate("modal.confirm")}
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        onOpenChange={handleClose}
+        open={open}
+        title={translate("dags:runAndTaskActions.clear.title", {
+          type: translate("taskInstance_other"),
+        })}
+      >
+        <Flex justifyContent="center" mb={4}>
+          <SegmentedControl
+            defaultValues={["downstream"]}
+            multiple
+            onChange={setSelectedOptions}
+            options={[
+              {
+                disabled: !hasLogicalDate,
+                label: translate("dags:runAndTaskActions.options.past"),
+                value: "past",
+              },
+              {
+                disabled: !hasLogicalDate,
+                label: translate("dags:runAndTaskActions.options.future"),
+                value: "future",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.upstream"),
+                value: "upstream",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.downstream"),
+                value: "downstream",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.onlyFailed"),
+                value: "onlyFailed",
+              },
+            ]}
+          />
+        </Flex>
+        <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
+        <ErrorAlert error={error} />
+        <Flex alignItems="center" justifyContent="space-between" mt={3}>
+          <Checkbox
+            checked={preventRunningTask}
+            onCheckedChange={(event) => setPreventRunningTask(Boolean(event.checked))}
+          >
+            {translate("dags:runAndTaskActions.options.preventRunningTasks")}
+          </Checkbox>
+          <Button
+            disabled={affectedTasks.total_entries === 0}
+            loading={isPending || isFetching}
+            onClick={() => {
+              void bulkClear(selectedTaskInstances, {
+                includeDownstream: downstream,
+                includeFuture: future,
+                includeOnlyFailed: onlyFailed,
+                includePast: past,
+                includeUpstream: upstream,
+                note,
+                preventRunningTask,
+              });
+            }}
+          >
+            <CgRedo />
+            {translate("modal.confirm")}
+          </Button>
+        </Flex>
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkDeleteTaskInstancesButton.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkDeleteTaskInstancesButton.tsx
index 3d3ed2456ed2c..845646560240f 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkDeleteTaskInstancesButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkDeleteTaskInstancesButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import { Box, Button, Text, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
@@ -24,7 +24,7 @@ import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { getColumns } from "src/components/ActionAccordion/columns";
 import { ActionErrors } from "src/components/ActionErrors";
 import { DataTable } from "src/components/DataTable";
-import { Accordion, Dialog } from "src/components/ui";
+import { Accordion, Modal } from "src/components/ui";
 import { useBulkTaskInstances } from "src/queries/useBulkTaskInstances";
 
 type Props = {
@@ -61,91 +61,82 @@ const BulkDeleteTaskInstancesButton = ({ deselectKeys, selectedTaskInstances }:
         {translate("dags:runAndTaskActions.delete.button", { type: translate("taskInstance_other") })}
       </Button>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("dags:runAndTaskActions.delete.dialog.title", {
-                  type: translate("taskInstance_other"),
-                })}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
+      <Modal
+        footerActions={
+          <Button
+            colorPalette="danger"
+            loading={isPending}
+            onClick={() => {
+              bulkAction({
+                actions: [
+                  {
+                    action: "delete" as const,
+                    action_on_non_existence: "skip",
+                    entities: selectedTaskInstances.map((ti) => ({
+                      dag_id: ti.dag_id,
+                      dag_run_id: ti.dag_run_id,
+                      map_index: ti.map_index,
+                      task_id: ti.task_id,
+                    })),
+                  },
+                ],
+              });
+            }}
+          >
+            <FiTrash2 />
+            <Text fontWeight="bold">{translate("modal.confirm")}</Text>
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={translate("dags:runAndTaskActions.delete.dialog.title", {
+          type: translate("taskInstance_other"),
+        })}
+      >
+        <Text color="fg.subtle" fontSize="sm" mb={4}>
+          {translate("dags:runAndTaskActions.delete.dialog.warning", {
+            type: translate("taskInstance_other"),
+          })}
+        </Text>
 
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <Text color="fg.subtle" fontSize="sm" mb={4}>
-              {translate("dags:runAndTaskActions.delete.dialog.warning", {
-                type: translate("taskInstance_other"),
-              })}
-            </Text>
+        <Box maxH="400px" overflowY="auto">
+          {isGrouped ? (
+            <Accordion.Root collapsible multiple variant="enclosed">
+              {[...byRunId.entries()].map(([runId, tis]) => (
+                <Accordion.Item key={runId} value={runId}>
+                  <Accordion.ItemTrigger>
+                    <Text fontSize="sm" fontWeight="semibold">
+                      {translate("runId")}: {runId}{" "}
+                      <Text as="span" color="fg.subtle" fontWeight="normal">
+                        ({tis.length})
+                      </Text>
+                    </Text>
+                  </Accordion.ItemTrigger>
+                  <Accordion.ItemContent>
+                    <DataTable
+                      columns={columns}
+                      data={tis}
+                      displayMode="table"
+                      modelName="common:taskInstance"
+                      total={tis.length}
+                    />
+                  </Accordion.ItemContent>
+                </Accordion.Item>
+              ))}
+            </Accordion.Root>
+          ) : (
+            <DataTable
+              columns={columns}
+              data={selectedTaskInstances}
+              displayMode="table"
+              modelName="common:taskInstance"
+              total={selectedTaskInstances.length}
+            />
+          )}
+        </Box>
 
-            <Box maxH="400px" overflowY="auto">
-              {isGrouped ? (
-                <Accordion.Root collapsible multiple variant="enclosed">
-                  {[...byRunId.entries()].map(([runId, tis]) => (
-                    <Accordion.Item key={runId} value={runId}>
-                      <Accordion.ItemTrigger>
-                        <Text fontSize="sm" fontWeight="semibold">
-                          {translate("runId")}: {runId}{" "}
-                          <Text as="span" color="fg.subtle" fontWeight="normal">
-                            ({tis.length})
-                          </Text>
-                        </Text>
-                      </Accordion.ItemTrigger>
-                      <Accordion.ItemContent>
-                        <DataTable
-                          columns={columns}
-                          data={tis}
-                          displayMode="table"
-                          modelName="common:taskInstance"
-                          total={tis.length}
-                        />
-                      </Accordion.ItemContent>
-                    </Accordion.Item>
-                  ))}
-                </Accordion.Root>
-              ) : (
-                <DataTable
-                  columns={columns}
-                  data={selectedTaskInstances}
-                  displayMode="table"
-                  modelName="common:taskInstance"
-                  total={selectedTaskInstances.length}
-                />
-              )}
-            </Box>
-
-            <ActionErrors actionResponse={data?.delete} error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                colorPalette="danger"
-                loading={isPending}
-                onClick={() => {
-                  bulkAction({
-                    actions: [
-                      {
-                        action: "delete" as const,
-                        action_on_non_existence: "skip",
-                        entities: selectedTaskInstances.map((ti) => ({
-                          dag_id: ti.dag_id,
-                          dag_run_id: ti.dag_run_id,
-                          map_index: ti.map_index,
-                          task_id: ti.task_id,
-                        })),
-                      },
-                    ],
-                  });
-                }}
-              >
-                <FiTrash2 />
-                <Text fontWeight="bold">{translate("modal.confirm")}</Text>
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+        <ActionErrors actionResponse={data?.delete} error={error} />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkMarkTaskInstancesAsButton.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkMarkTaskInstancesAsButton.tsx
index 43084c4b22162..f931de178b866 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkMarkTaskInstancesAsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/BulkMarkTaskInstancesAsButton.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Badge, Box, Button, Flex, Heading, HStack, VStack, useDisclosure } from "@chakra-ui/react";
+import { Badge, Box, Button, Flex, HStack, useDisclosure } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FiX } from "react-icons/fi";
@@ -27,7 +27,7 @@ import { ActionAccordion } from "src/components/ActionAccordion";
 import { ActionErrors } from "src/components/ActionErrors";
 import { allowedStates } from "src/components/MarkAs/utils";
 import { StateBadge } from "src/components/StateBadge";
-import { Dialog, Menu } from "src/components/ui";
+import { Modal, Menu } from "src/components/ui";
 import SegmentedControl from "src/components/ui/SegmentedControl";
 import { useBulkMarkAsDryRun } from "src/queries/useBulkMarkAsDryRun";
 import { useBulkTaskInstances } from "src/queries/useBulkTaskInstances";
@@ -119,85 +119,80 @@ const BulkMarkTaskInstancesAsButton = ({ deselectKeys, selectedTaskInstances }:
         </Menu.Content>
       </Menu.Root>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("dags:runAndTaskActions.markAs.title", {
-                  state,
-                  type: translate("taskInstance_other"),
-                })}{" "}
-                <StateBadge state={state} />
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <Flex justifyContent="center" mb={4}>
-              <SegmentedControl
-                defaultValues={[]}
-                multiple
-                onChange={setSelectedOptions}
-                options={[
-                  {
-                    disabled: !hasLogicalDate,
-                    label: translate("dags:runAndTaskActions.options.past"),
-                    value: "past",
-                  },
+      <Modal
+        footerActions={
+          <Button
+            disabled={affectedTasks.total_entries === 0}
+            loading={isPending || isFetching}
+            onClick={() => {
+              bulkAction({
+                actions: [
                   {
-                    disabled: !hasLogicalDate,
-                    label: translate("dags:runAndTaskActions.options.future"),
-                    value: "future",
+                    action: "update" as const,
+                    action_on_non_existence: "skip",
+                    entities: directlyAffected.map((ti) => ({
+                      dag_id: ti.dag_id,
+                      dag_run_id: ti.dag_run_id,
+                      include_downstream: downstream,
+                      include_future: future,
+                      include_past: past,
+                      include_upstream: upstream,
+                      map_index: ti.map_index,
+                      new_state: state,
+                      note,
+                      task_id: ti.task_id,
+                    })),
+                    update_mask: note === null ? ["new_state"] : ["new_state", "note"],
                   },
-                  {
-                    label: translate("dags:runAndTaskActions.options.upstream"),
-                    value: "upstream",
-                  },
-                  {
-                    label: translate("dags:runAndTaskActions.options.downstream"),
-                    value: "downstream",
-                  },
-                ]}
-              />
-            </Flex>
-            <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
-            <ActionErrors actionResponse={data?.update} error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                disabled={affectedTasks.total_entries === 0}
-                loading={isPending || isFetching}
-                onClick={() => {
-                  bulkAction({
-                    actions: [
-                      {
-                        action: "update" as const,
-                        action_on_non_existence: "skip",
-                        entities: directlyAffected.map((ti) => ({
-                          dag_id: ti.dag_id,
-                          dag_run_id: ti.dag_run_id,
-                          include_downstream: downstream,
-                          include_future: future,
-                          include_past: past,
-                          include_upstream: upstream,
-                          map_index: ti.map_index,
-                          new_state: state,
-                          note,
-                          task_id: ti.task_id,
-                        })),
-                        update_mask: note === null ? ["new_state"] : ["new_state", "note"],
-                      },
-                    ],
-                  });
-                }}
-              >
-                {translate("modal.confirm")}
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+                ],
+              });
+            }}
+          >
+            {translate("modal.confirm")}
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={
+          <>
+            {translate("dags:runAndTaskActions.markAs.title", {
+              state,
+              type: translate("taskInstance_other"),
+            })}{" "}
+            <StateBadge state={state} />
+          </>
+        }
+      >
+        <Flex justifyContent="center" mb={4}>
+          <SegmentedControl
+            defaultValues={[]}
+            multiple
+            onChange={setSelectedOptions}
+            options={[
+              {
+                disabled: !hasLogicalDate,
+                label: translate("dags:runAndTaskActions.options.past"),
+                value: "past",
+              },
+              {
+                disabled: !hasLogicalDate,
+                label: translate("dags:runAndTaskActions.options.future"),
+                value: "future",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.upstream"),
+                value: "upstream",
+              },
+              {
+                label: translate("dags:runAndTaskActions.options.downstream"),
+                value: "downstream",
+              },
+            ]}
+          />
+        </Flex>
+        <ActionAccordion affectedTasks={affectedTasks} groupByRunId note={note} setNote={setNote} />
+        <ActionErrors actionResponse={data?.update} error={error} />
+      </Modal>
     </Box>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/TaskStateStore/TaskStateStoreModal.tsx b/airflow-core/src/airflow/ui/src/pages/TaskStateStore/TaskStateStoreModal.tsx
index d7de2358cf0b1..767d883062ac9 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskStateStore/TaskStateStoreModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskStateStore/TaskStateStoreModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, Flex, Heading, Input, RadioCard, Text, VStack } from "@chakra-ui/react";
+import { Box, Button, Flex, Input, RadioCard, Text, VStack } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import tz from "dayjs/plugin/timezone";
 import { useEffect, useMemo, useState } from "react";
@@ -30,7 +30,7 @@ import {
 } from "openapi/queries";
 import { DateTimeInput } from "src/components/DateTimeInput";
 import { JsonEditor } from "src/components/JsonEditor";
-import { Dialog, ProgressBar } from "src/components/ui";
+import { Modal, ProgressBar } from "src/components/ui";
 import { useTimezone } from "src/context/timezone";
 import { useStoreMutation } from "src/queries/useStoreMutation";
 
@@ -143,109 +143,104 @@ export const TaskStateStoreModal = ({
   };
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={isOpen} unmountOnExit>
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <Heading size="lg">{translate(`dag:taskStateStore.${mode}`)}</Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          {isFetchingExisting ? (
-            <ProgressBar size="xs" />
-          ) : (
-            <VStack gap={4}>
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("common:key")}
-                </Text>
-                {isEditMode ? (
-                  <Text>{storeKey}</Text>
-                ) : (
-                  <Input onChange={(event) => setKey(event.target.value)} value={key} />
-                )}
-              </Box>
-
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("common:value")}
-                </Text>
-                <JsonEditor onChange={setValue} value={value} />
-              </Box>
-
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("dag:taskStateStore.expiresAt.label")}
-                </Text>
-                <RadioCard.Root
-                  onValueChange={(ev) => setExpiresAt(ev.value as "custom" | "default" | "never")}
-                  value={expiresAt}
-                >
-                  <Flex gap={2}>
-                    <RadioCard.Item flex={1} value="default">
-                      <RadioCard.ItemHiddenInput />
-                      <RadioCard.ItemControl>
-                        <RadioCard.ItemContent>
-                          <RadioCard.ItemText>
-                            {translate("dag:taskStateStore.expiresAt.default", { interval: "30 days" })}
-                          </RadioCard.ItemText>
-                        </RadioCard.ItemContent>
-                        <RadioCard.ItemIndicator />
-                      </RadioCard.ItemControl>
-                    </RadioCard.Item>
-                    <RadioCard.Item flex={1} value="never">
-                      <RadioCard.ItemHiddenInput />
-                      <RadioCard.ItemControl>
-                        <RadioCard.ItemContent>
-                          <RadioCard.ItemText>
-                            {translate("dag:taskStateStore.expiresAt.never")}
-                          </RadioCard.ItemText>
-                        </RadioCard.ItemContent>
-                        <RadioCard.ItemIndicator />
-                      </RadioCard.ItemControl>
-                    </RadioCard.Item>
-                    <RadioCard.Item flex={1} value="custom">
-                      <RadioCard.ItemHiddenInput />
-                      <RadioCard.ItemControl>
-                        <RadioCard.ItemContent>
-                          <RadioCard.ItemText>
-                            {translate("dag:taskStateStore.expiresAt.custom")}
-                          </RadioCard.ItemText>
-                        </RadioCard.ItemContent>
-                        <RadioCard.ItemIndicator />
-                      </RadioCard.ItemControl>
-                    </RadioCard.Item>
-                  </Flex>
-                </RadioCard.Root>
-                {expiresAt === "custom" && (
-                  <DateTimeInput
-                    min={minDateTime}
-                    mt={2}
-                    onChange={(ev) => setCustomExpiresAt(ev.target.value)}
-                    value={customExpiresAt}
-                  />
-                )}
-              </Box>
-            </VStack>
-          )}
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={onClose} variant="outline">
-            {translate("common:modal.cancel")}
-          </Button>
-          <Button
-            disabled={
-              isFetchingExisting ||
-              !isValueValid ||
-              (!isEditMode && key === "") ||
-              (expiresAt === "custom" && !customExpiresAt)
-            }
-            loading={isPending}
-            onClick={onSave}
-          >
-            {translate("common:modal.save")}
-          </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal
+      footerActions={
+        <Button
+          disabled={
+            isFetchingExisting ||
+            !isValueValid ||
+            (!isEditMode && key === "") ||
+            (expiresAt === "custom" && !customExpiresAt)
+          }
+          loading={isPending}
+          onClick={onSave}
+        >
+          {translate("common:modal.save")}
+        </Button>
+      }
+      lazyMount
+      onOpenChange={onClose}
+      open={isOpen}
+      title={translate(`dag:taskStateStore.${mode}`)}
+      unmountOnExit
+    >
+      {isFetchingExisting ? (
+        <ProgressBar size="xs" />
+      ) : (
+        <VStack gap={4}>
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("common:key")}
+            </Text>
+            {isEditMode ? (
+              <Text>{storeKey}</Text>
+            ) : (
+              <Input onChange={(event) => setKey(event.target.value)} value={key} />
+            )}
+          </Box>
+
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("common:value")}
+            </Text>
+            <JsonEditor onChange={setValue} value={value} />
+          </Box>
+
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("dag:taskStateStore.expiresAt.label")}
+            </Text>
+            <RadioCard.Root
+              onValueChange={(ev) => setExpiresAt(ev.value as "custom" | "default" | "never")}
+              value={expiresAt}
+            >
+              <Flex gap={2}>
+                <RadioCard.Item flex={1} value="default">
+                  <RadioCard.ItemHiddenInput />
+                  <RadioCard.ItemControl>
+                    <RadioCard.ItemContent>
+                      <RadioCard.ItemText>
+                        {translate("dag:taskStateStore.expiresAt.default", { interval: "30 days" })}
+                      </RadioCard.ItemText>
+                    </RadioCard.ItemContent>
+                    <RadioCard.ItemIndicator />
+                  </RadioCard.ItemControl>
+                </RadioCard.Item>
+                <RadioCard.Item flex={1} value="never">
+                  <RadioCard.ItemHiddenInput />
+                  <RadioCard.ItemControl>
+                    <RadioCard.ItemContent>
+                      <RadioCard.ItemText>
+                        {translate("dag:taskStateStore.expiresAt.never")}
+                      </RadioCard.ItemText>
+                    </RadioCard.ItemContent>
+                    <RadioCard.ItemIndicator />
+                  </RadioCard.ItemControl>
+                </RadioCard.Item>
+                <RadioCard.Item flex={1} value="custom">
+                  <RadioCard.ItemHiddenInput />
+                  <RadioCard.ItemControl>
+                    <RadioCard.ItemContent>
+                      <RadioCard.ItemText>
+                        {translate("dag:taskStateStore.expiresAt.custom")}
+                      </RadioCard.ItemText>
+                    </RadioCard.ItemContent>
+                    <RadioCard.ItemIndicator />
+                  </RadioCard.ItemControl>
+                </RadioCard.Item>
+              </Flex>
+            </RadioCard.Root>
+            {expiresAt === "custom" && (
+              <DateTimeInput
+                min={minDateTime}
+                mt={2}
+                onChange={(ev) => setCustomExpiresAt(ev.target.value)}
+                value={customExpiresAt}
+              />
+            )}
+          </Box>
+        </VStack>
+      )}
+    </Modal>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/DeleteVariablesButton.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/DeleteVariablesButton.tsx
index 09ecb4ad8f89f..9bc50bca56581 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/DeleteVariablesButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/DeleteVariablesButton.tsx
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Code, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, Code, Text, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
 import { ErrorAlert } from "src/components/ErrorAlert";
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 import { useBulkDeleteVariables } from "src/queries/useBulkDeleteVariables";
 
 type Props = {
@@ -47,55 +47,46 @@ const DeleteVariablesButton = ({ clearSelections, deleteKeys: variableKeys }: Pr
         {translate("deleteActions.button")}
       </Button>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">
-                {translate("variables.delete.deleteVariable", {
-                  count: variableKeys.length,
-                })}
-              </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-          <Dialog.Body width="full">
-            <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
-              {translate("variables.delete.firstConfirmMessage", { count: variableKeys.length })}
-              <br />
-              <Code mb={2} mt={2} p={4}>
-                {variableKeys.join(", ")}
-              </Code>
-              <br />
-              {translate("deleteActions.modal.secondConfirmMessage")}
-              <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
-            </Text>
-            <ErrorAlert error={error} />
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                colorPalette="danger"
-                loading={isPending}
-                onClick={() => {
-                  mutate({
-                    requestBody: {
-                      actions: [
-                        {
-                          action: "delete" as const,
-                          action_on_non_existence: "fail",
-                          entities: variableKeys,
-                        },
-                      ],
+      <Modal
+        footerActions={
+          <Button
+            colorPalette="danger"
+            loading={isPending}
+            onClick={() => {
+              mutate({
+                requestBody: {
+                  actions: [
+                    {
+                      action: "delete" as const,
+                      action_on_non_existence: "fail",
+                      entities: variableKeys,
                     },
-                  });
-                }}
-              >
-                <FiTrash2 /> <Text fontWeight="bold">{translate("deleteActions.modal.confirmButton")}</Text>
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+                  ],
+                },
+              });
+            }}
+          >
+            <FiTrash2 /> <Text fontWeight="bold">{translate("deleteActions.modal.confirmButton")}</Text>
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={translate("variables.delete.deleteVariable", {
+          count: variableKeys.length,
+        })}
+      >
+        <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
+          {translate("variables.delete.firstConfirmMessage", { count: variableKeys.length })}
+          <br />
+          <Code mb={2} mt={2} p={4}>
+            {variableKeys.join(", ")}
+          </Code>
+          <br />
+          {translate("deleteActions.modal.secondConfirmMessage")}
+          <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
+        </Text>
+        <ErrorAlert error={error} />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesButton.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesButton.tsx
index 2d2dd92900bc8..22c1f63049659 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ImportVariablesButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Heading, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiUploadCloud } from "react-icons/fi";
 
-import { Dialog } from "src/components/ui";
+import { Modal } from "src/components/ui";
 
 import ImportVariablesForm from "./ImportVariablesForm";
 
@@ -38,21 +38,9 @@ const ImportVariablesButton = ({ disabled }: Props) => {
         <FiUploadCloud /> {translate("variables.import.title")}
       </Button>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl"> {translate("variables.import.title")} </Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body width="full">
-            <ImportVariablesForm onClose={onClose} />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal onOpenChange={onClose} open={open} title={translate("variables.import.title")}>
+        <ImportVariablesForm onClose={onClose} />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/AddVariableButton.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/AddVariableButton.tsx
index 858522344c7d0..d146627a2dee3 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/AddVariableButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/AddVariableButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Heading, useDisclosure } from "@chakra-ui/react";
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { MdAdd } from "react-icons/md";
 
-import { Dialog, Toaster } from "src/components/ui";
+import { Modal, Toaster } from "src/components/ui";
 import { useAddVariable } from "src/queries/useAddVariable";
 
 import VariableForm, { type VariableBody } from "./VariableForm";
@@ -55,25 +55,15 @@ const AddVariableButton = ({ disabled }: Props) => {
         <MdAdd /> {translate("variables.add")}
       </Button>
 
-      <Dialog.Root onOpenChange={handleClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <Heading size="xl">{translate("variables.add")}</Heading>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <VariableForm
-              error={error}
-              initialVariable={initialVariableValue}
-              isPending={isPending}
-              manageMutate={addVariable}
-              setError={setError}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal onOpenChange={handleClose} open={open} title={translate("variables.add")}>
+        <VariableForm
+          error={error}
+          initialVariable={initialVariableValue}
+          isPending={isPending}
+          manageMutate={addVariable}
+          setError={setError}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/DeleteVariableButton.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/DeleteVariableButton.tsx
index eaa94a6ddb52e..a87f2b71b66fd 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/DeleteVariableButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/DeleteVariableButton.tsx
@@ -16,11 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Code, Flex, Heading, Text, useDisclosure, VStack } from "@chakra-ui/react";
+import { Button, Code, Text, useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 
-import { IconButton, Dialog } from "src/components/ui";
+import { IconButton, Modal } from "src/components/ui";
 import { useDeleteVariable } from "src/queries/useDeleteVariable";
 
 type Props = {
@@ -46,43 +46,35 @@ const DeleteVariableButton = ({ deleteKey: variableKey, disabled }: Props) => {
         <FiTrash2 />
       </IconButton>
 
-      <Dialog.Root onOpenChange={onClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <VStack align="start" gap={4}>
-              <Heading size="xl">{translate("variables.delete.deleteVariable", { count: 1 })}</Heading>
-            </VStack>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body width="full">
-            <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
-              {translate("variables.delete.firstConfirmMessage_one")}
-              <br />
-              <Code mb={2} mt={2} p={4}>
-                {variableKey}
-              </Code>
-              <br />
-              {translate("deleteActions.modal.secondConfirmMessage")}
-              <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
-            </Text>
-            <Flex justifyContent="end" mt={3}>
-              <Button
-                colorPalette="danger"
-                loading={isPending}
-                onClick={() => {
-                  mutate({
-                    variableKey,
-                  });
-                }}
-              >
-                <FiTrash2 /> <Text fontWeight="bold">{translate("deleteActions.modal.confirmButton")}</Text>
-              </Button>
-            </Flex>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal
+        footerActions={
+          <Button
+            colorPalette="danger"
+            loading={isPending}
+            onClick={() => {
+              mutate({
+                variableKey,
+              });
+            }}
+          >
+            <FiTrash2 /> <Text fontWeight="bold">{translate("deleteActions.modal.confirmButton")}</Text>
+          </Button>
+        }
+        onOpenChange={onClose}
+        open={open}
+        title={translate("variables.delete.deleteVariable", { count: 1 })}
+      >
+        <Text color="fg" fontSize="md" fontWeight="semibold" mb={4}>
+          {translate("variables.delete.firstConfirmMessage_one")}
+          <br />
+          <Code mb={2} mt={2} p={4}>
+            {variableKey}
+          </Code>
+          <br />
+          {translate("deleteActions.modal.secondConfirmMessage")}
+          <strong>{translate("deleteActions.modal.thirdConfirmMessage")}</strong>
+        </Text>
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/EditVariableButton.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/EditVariableButton.tsx
index f3dcbdb8cc023..2cc35e4ad1aa1 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/EditVariableButton.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/EditVariableButton.tsx
@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Heading, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiEdit } from "react-icons/fi";
 
 import type { VariableResponse } from "openapi/requests/types.gen";
-import { IconButton, Dialog } from "src/components/ui";
+import { IconButton, Modal } from "src/components/ui";
 import { useEditVariable } from "src/queries/useEditVariable";
 
 import type { VariableBody } from "./VariableForm";
@@ -67,25 +67,15 @@ const EditVariableButton = ({ disabled, variable }: Props) => {
         <FiEdit />
       </IconButton>
 
-      <Dialog.Root onOpenChange={handleClose} open={open}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <Heading size="xl">{translate("variables.edit")}</Heading>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <VariableForm
-              error={error}
-              initialVariable={initialVariableValue}
-              isPending={isPending}
-              manageMutate={editVariable}
-              setError={setError}
-            />
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+      <Modal onOpenChange={handleClose} open={open} title={translate("variables.edit")}>
+        <VariableForm
+          error={error}
+          initialVariable={initialVariableValue}
+          isPending={isPending}
+          manageMutate={editVariable}
+          setError={setError}
+        />
+      </Modal>
     </>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/XCom/XComModal.tsx b/airflow-core/src/airflow/ui/src/pages/XCom/XComModal.tsx
index 4b4e1f6728408..357545714f553 100644
--- a/airflow-core/src/airflow/ui/src/pages/XCom/XComModal.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/XCom/XComModal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Box, Heading, Input, Text, VStack } from "@chakra-ui/react";
+import { Box, Button, Input, Text, VStack } from "@chakra-ui/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -30,7 +30,7 @@ import {
 } from "openapi/queries";
 import type { XComResponseNative } from "openapi/requests/types.gen";
 import { JsonEditor } from "src/components/JsonEditor";
-import { Dialog, ProgressBar, toaster } from "src/components/ui";
+import { Modal, ProgressBar, toaster } from "src/components/ui";
 
 type XComModalProps = {
   readonly dagId: string;
@@ -167,46 +167,41 @@ const XComModal = ({ dagId, isOpen, mapIndex, mode, onClose, runId, taskId, xcom
   const title = isEditMode ? translate("browse:xcom.edit.title") : translate("browse:xcom.add.title");
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={isOpen} size="lg">
-      <Dialog.Content backdrop>
-        <Dialog.Header>
-          <Heading size="lg">{title}</Heading>
-        </Dialog.Header>
-        <Dialog.CloseTrigger />
-        <Dialog.Body>
-          {isLoading ? (
-            <ProgressBar size="xs" />
-          ) : (
-            <VStack gap={4}>
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("browse:xcom.key")}
-                </Text>
-                {isEditMode ? (
-                  <Text>{xcomKey}</Text>
-                ) : (
-                  <Input onChange={(event) => setKey(event.target.value)} value={key} />
-                )}
-              </Box>
-              <Box width="100%">
-                <Text fontWeight="bold" mb={2}>
-                  {translate("browse:xcom.value")}
-                </Text>
-                <JsonEditor onChange={(val) => setValue(val)} value={value} />
-              </Box>
-            </VStack>
-          )}
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={onClose} variant="outline">
-            {translate("common:modal.cancel")}
-          </Button>
-          <Button disabled={isLoading || (!isEditMode && !key)} loading={isPending} onClick={onSave}>
-            {translate("common:modal.save")}
-          </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog.Root>
+    <Modal
+      footerActions={
+        <Button disabled={isLoading || (!isEditMode && !key)} loading={isPending} onClick={onSave}>
+          {translate("common:modal.save")}
+        </Button>
+      }
+      lazyMount
+      onOpenChange={onClose}
+      open={isOpen}
+      size="lg"
+      title={title}
+    >
+      {isLoading ? (
+        <ProgressBar size="xs" />
+      ) : (
+        <VStack gap={4}>
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("browse:xcom.key")}
+            </Text>
+            {isEditMode ? (
+              <Text>{xcomKey}</Text>
+            ) : (
+              <Input onChange={(event) => setKey(event.target.value)} value={key} />
+            )}
+          </Box>
+          <Box width="100%">
+            <Text fontWeight="bold" mb={2}>
+              {translate("browse:xcom.value")}
+            </Text>
+            <JsonEditor onChange={(val) => setValue(val)} value={value} />
+          </Box>
+        </VStack>
+      )}
+    </Modal>
   );
 };
 
diff --git a/airflow-core/src/airflow/ui/src/theme.ts b/airflow-core/src/airflow/ui/src/theme.ts
index f62d681cbb2df..2c421a750792f 100644
--- a/airflow-core/src/airflow/ui/src/theme.ts
+++ b/airflow-core/src/airflow/ui/src/theme.ts
@@ -22,8 +22,8 @@ import {
   defaultConfig,
   defineConfig,
   mergeConfigs,
-  type ThemingConfig,
   type SystemStyleObject,
+  type ThemingConfig,
 } from "@chakra-ui/react";
 import type { CSSProperties } from "react";
 
@@ -364,6 +364,36 @@ const defaultAirflowTheme: ThemingConfig = {
     // Nearly all dialogs in the app use size="xl"; make it the default.
     dialog: {
       slots: [],
+      base: {
+        body: { padding: 4 },
+        // Chakra's recipe floats the close button over the content; ours sits inside
+        // the flex header instead, so it must lay out in flow or it overlaps header
+        // content such as the import-error search bar.
+        closeTrigger: { position: "static" },
+        // Chakra defaults the content to `bg.panel`, which resolves to gray.950 in
+        // dark mode — far darker than the page. Use the standard background so a
+        // dialog sits at the same level as everything else.
+        content: { bg: "bg" },
+        // Sized dialogs are `width: 100%` under a `maxW` cap, so below that cap they run
+        // edge to edge. Inset the positioner (the same lever Chakra's own `cover` size
+        // uses) to keep a gutter on narrow viewports.
+        positioner: { paddingInline: 4 },
+        // Only rendered when a dialog actually has footer content, so the rule doubles
+        // as "separate the actions from the body whenever actions exist".
+        footer: { borderTopColor: "border", borderTopWidth: "1px", paddingX: 4, paddingY: 3 },
+        // Mirror the Nav sidebar so the header reads as chrome rather than content.
+        // `inherit` keeps the tinted band inside the content's rounded top corners.
+        header: { bg: "brand.muted", borderTopRadius: "inherit", paddingX: 4, paddingY: 3 },
+        title: { fontSize: "lg" },
+      },
+      variants: {
+        size: {
+          // `cover` and `full` are meant to reach the viewport edges, so they opt out
+          // of the gutter (`cover` keeps the inset its own variant already defines).
+          cover: { positioner: { paddingInline: 10 } },
+          full: { positioner: { paddingInline: 0 } },
+        },
+      },
       defaultVariants: { size: "xl" } as Record<string, string>,
     },
     checkbox: {
diff --git a/airflow-core/src/airflow/ui/src/utils/TrimText.tsx b/airflow-core/src/airflow/ui/src/utils/TrimText.tsx
index a4899400b0db8..4821c8d824cf4 100644
--- a/airflow-core/src/airflow/ui/src/utils/TrimText.tsx
+++ b/airflow-core/src/airflow/ui/src/utils/TrimText.tsx
@@ -16,10 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Text, Box, useDisclosure, Heading, Stack } from "@chakra-ui/react";
+import { Text, Box, useDisclosure, Stack } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 
-import { Dialog, Tooltip } from "src/components/ui";
+import { Modal, Tooltip } from "src/components/ui";
 
 import { capitalize } from "./capitalize";
 import { trimText } from "./trimTextFn";
@@ -69,52 +69,46 @@ export const TrimText = ({
         </Box>
       </Tooltip>
 
-      <Dialog.Root onOpenChange={onClose} open={isClickable ? open : undefined}>
-        <Dialog.Content backdrop>
-          <Dialog.Header>
-            <Heading size="xl">{translate("trimText.details")}</Heading>
-          </Dialog.Header>
-
-          <Dialog.CloseTrigger />
-
-          <Dialog.Body>
-            <Stack gap={4}>
-              {onClickContent ? (
-                Object.entries(onClickContent).map(([key, value]) => {
-                  const formattedKey = formatKey(key);
-                  const isEmpty = value === "" || value === null;
+      <Modal
+        onOpenChange={onClose}
+        open={isClickable ? open : undefined}
+        title={translate("trimText.details")}
+      >
+        <Stack gap={4}>
+          {onClickContent ? (
+            Object.entries(onClickContent).map(([key, value]) => {
+              const formattedKey = formatKey(key);
+              const isEmpty = value === "" || value === null;
 
-                  return (
-                    <Box key={key}>
-                      <Text fontWeight="bold" mb={2}>
-                        {formattedKey}
-                      </Text>
-                      <Box
-                        bg="bg.subtle"
-                        borderRadius="md"
-                        maxHeight={200}
-                        overflow="auto"
-                        overflowWrap="break-word"
-                        p={4}
-                        whiteSpace="pre-wrap"
-                      >
-                        <Text
-                          color={isEmpty ? "gray.emphasized" : undefined}
-                          fontWeight={isEmpty ? "bold" : "normal"}
-                        >
-                          {isEmpty ? translate("trimText.empty") : String(value)}
-                        </Text>
-                      </Box>
-                    </Box>
-                  );
-                })
-              ) : (
-                <Text>{translate("trimText.noContent")}</Text>
-              )}
-            </Stack>
-          </Dialog.Body>
-        </Dialog.Content>
-      </Dialog.Root>
+              return (
+                <Box key={key}>
+                  <Text fontWeight="bold" mb={2}>
+                    {formattedKey}
+                  </Text>
+                  <Box
+                    bg="bg.subtle"
+                    borderRadius="md"
+                    maxHeight={200}
+                    overflow="auto"
+                    overflowWrap="break-word"
+                    p={4}
+                    whiteSpace="pre-wrap"
+                  >
+                    <Text
+                      color={isEmpty ? "gray.emphasized" : undefined}
+                      fontWeight={isEmpty ? "bold" : "normal"}
+                    >
+                      {isEmpty ? translate("trimText.empty") : String(value)}
+                    </Text>
+                  </Box>
+                </Box>
+              );
+            })
+          ) : (
+            <Text>{translate("trimText.noContent")}</Text>
+          )}
+        </Stack>
+      </Modal>
     </>
   );
 };