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>
     </>
   );
 };