diff --git a/client/src/components/Common/GCard.types.ts b/client/src/components/Common/GCard.types.ts
index 6a8a2323d02e..4f834ed02be9 100644
--- a/client/src/components/Common/GCard.types.ts
+++ b/client/src/components/Common/GCard.types.ts
@@ -1,16 +1,13 @@
 import type { SizeProp } from "@fortawesome/fontawesome-svg-core";
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
-import type { BootstrapVariant } from "@/components/Common";
+import type { BootstrapSize, BootstrapVariant } from "@/components/Common";
 
 /** Card badge display styles */
 export type CardBadgeType = "pill" | "badge";
 
-/** Bootstrap component sizes */
-export type BootstrapSize = "xs" | "sm" | "md" | "lg" | "xl";
-
 /** Title sizes for heading components */
-export type TitleSize = "xl" | "lg" | "md" | "sm" | "text";
+export type TitleSize = BootstrapSize | "text";
 
 /** Base properties for all card elements */
 interface BaseCardElement {
diff --git a/client/src/components/Common/GTable.types.ts b/client/src/components/Common/GTable.types.ts
index 1ca5e6007bda..5869c58aeb4e 100644
--- a/client/src/components/Common/GTable.types.ts
+++ b/client/src/components/Common/GTable.types.ts
@@ -1,10 +1,7 @@
 import type { SizeProp } from "@fortawesome/fontawesome-svg-core";
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
-import type { BootstrapVariant } from "@/components/Common";
-
-/** Bootstrap component sizes */
-export type BootstrapSize = "xs" | "sm" | "md" | "lg" | "xl";
+import type { BootstrapSize, BootstrapVariant } from "@/components/Common";
 
 /** Table field sorting order */
 export type SortOrder = "asc" | "desc";
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 7eead34401e6..81137c1c838d 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -17,7 +17,8 @@ interface Props {
     bold?: boolean;
     separator?: boolean;
     inline?: boolean;
-    size?: "xl" | "lg" | "md" | "sm" | "text";
+    // TODO: Redo in Vue 3 to use BootstrapSize for prop typing.
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "text";
     icon?: IconLike;
     truncate?: boolean;
     collapse?: "open" | "closed" | "none";
diff --git a/client/src/components/Common/index.ts b/client/src/components/Common/index.ts
index bd7d97f1f3d0..654b0232d559 100644
--- a/client/src/components/Common/index.ts
+++ b/client/src/components/Common/index.ts
@@ -24,6 +24,9 @@ export type BootstrapVariant =
     | "outline-link"
     | "outline-dark";
 
+/** Bootstrap component sizes */
+export type BootstrapSize = "xs" | "sm" | "md" | "lg" | "xl";
+
 /**
  * Represents a breadcrumb item in the BreadcrumbHeading component.
  * Each item can have a title, an optional URL to navigate to, and optional additional text
diff --git a/client/src/composables/confirmDialog.ts b/client/src/composables/confirmDialog.ts
index 6137ec9b050c..35e181d5b72b 100644
--- a/client/src/composables/confirmDialog.ts
+++ b/client/src/composables/confirmDialog.ts
@@ -1,6 +1,6 @@
 import { type Ref, ref } from "vue";
 
-import type { BootstrapVariant } from "@/components/Common";
+import type { BootstrapSize, BootstrapVariant } from "@/components/Common";
 
 /**
  * Bootstrap Vue modal message box options interface.
@@ -25,7 +25,7 @@ export interface ConfirmDialogOptions {
      * Modal size: 'sm', 'lg', 'xl'
      * @default undefined (medium)
      */
-    size?: "sm" | "lg" | "xl";
+    size?: BootstrapSize;
     /**
      * Center modal vertically
      * @default true
@@ -60,7 +60,7 @@ export interface ConfirmDialogOptions {
      * Footer button size: 'sm', 'lg'
      * @default undefined (normal)
      */
-    buttonSize?: "sm" | "lg";
+    buttonSize?: BootstrapSize;
     /**
      * Hide header close button
      * @default false