diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index 465c50e050e..1021895d0e4 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
   header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
   id?: string;
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index 3f9d6cda8d4..326d74484d6 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
 
 export interface AlertButton {
   text: string;
-  role?: 'cancel' | 'destructive' | string;
+  role?: LiteralUnion<'cancel' | 'destructive', string>;
   cssClass?: string | string[];
   id?: string;
   htmlAttributes?: { [key: string]: any };
diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts
index d5ddff69e45..af320f59ba5 100644
--- a/core/src/components/toast/toast-interface.ts
+++ b/core/src/components/toast/toast-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Color, Mode } from '../../interface';
+import type { AnimationBuilder, Color, LiteralUnion, Mode } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface ToastOptions {
@@ -33,8 +33,7 @@ export interface ToastButton {
   text?: string;
   icon?: string;
   side?: 'start' | 'end';
-  role?: 'cancel' | string;
-
+  role?: LiteralUnion<'cancel', string>;
   /**
    * @deprecated Use the toast button's CSS Shadow Parts instead.
    */
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 3ac6705855b..83ae6e2b6b3 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -131,7 +131,7 @@ export type PredefinedColors =
   | 'medium'
   | 'dark';
 
-type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+export type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
 export type Color = LiteralUnion<PredefinedColors, string>;
 export type Mode = 'ios' | 'md';