diff --git a/src/components/ReportActionItem/ActionableItemButtons.tsx b/src/components/ReportActionItem/ActionableItemButtons.tsx
index dd7d212656b8..3db4d53fa9cb 100644
--- a/src/components/ReportActionItem/ActionableItemButtons.tsx
+++ b/src/components/ReportActionItem/ActionableItemButtons.tsx
@@ -1,11 +1,14 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
+import type {ButtonTextProps} from '@components/ButtonComposed/primitives/ButtonText';
+import type {ButtonStyleProps} from '@components/ButtonComposed/types';
 
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 
-import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 
 import React from 'react';
 import {View} from 'react-native';
@@ -14,19 +17,18 @@ type ActionableItem = {
     isPrimary?: boolean;
     key: string;
     onPress: () => void;
-    text: string;
-    shouldUseLocalization?: boolean;
-};
+} & ({translationKey: TranslationPaths; text?: never} | {text: string; translationKey?: never});
 
 type ActionableItemButtonsProps = {
     items: ActionableItem[];
     layout?: 'horizontal' | 'vertical';
-    shouldUseLocalization?: boolean;
-    primaryTextNumberOfLines?: number;
-    styles?: {
-        text?: StyleProp<TextStyle>;
-        button?: StyleProp<ViewStyle>;
-    };
+
+    /** Props forwarded to the `Button` rendered for each item */
+    buttonProps?: Pick<ButtonStyleProps, 'innerStyles'>;
+
+    /** Props forwarded to the `Button.Text` rendered for each item */
+    textProps?: Pick<ButtonTextProps, 'numberOfLines' | 'style'>;
+
     wrapperStyle?: StyleProp<ViewStyle>;
 };
 
@@ -40,13 +42,12 @@ function ActionableItemButtons(props: ActionableItemButtonsProps) {
                 <Button
                     key={item.key}
                     onPress={item.onPress}
-                    text={props.shouldUseLocalization ? translate(item.text as TranslationPaths) : item.text}
-                    medium
-                    success={item.isPrimary}
-                    innerStyles={props.styles?.button}
-                    primaryTextNumberOfLines={props.primaryTextNumberOfLines}
-                    textStyles={props.styles?.text}
-                />
+                    size={CONST.BUTTON_SIZE.MEDIUM}
+                    variant={item.isPrimary ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
+                    {...props.buttonProps}
+                >
+                    <Button.Text {...props.textProps}>{item.translationKey ? translate(item.translationKey) : item.text}</Button.Text>
+                </Button>
             ))}
         </View>
     );
diff --git a/src/components/ReportActionItem/IssueCardMessage.tsx b/src/components/ReportActionItem/IssueCardMessage.tsx
index 6595a73d2296..4951d6c5d0b2 100644
--- a/src/components/ReportActionItem/IssueCardMessage.tsx
+++ b/src/components/ReportActionItem/IssueCardMessage.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import {useSession} from '@components/OnyxListItemProvider';
 import RenderHTML from '@components/RenderHTML';
 
@@ -15,6 +15,7 @@ import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
 import {isPolicyAdmin} from '@libs/PolicyUtils';
 import {getCardIssuedMessage, getOriginalMessage, shouldShowActivateCard, shouldShowAddMissingDetails} from '@libs/ReportActionsUtils';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -63,10 +64,11 @@ function IssueCardMessage({action, policyID}: IssueCardMessageProps) {
                     onPress={() => {
                         Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.MISSING_PERSONAL_DETAILS.getRoute(String(expensifyCard.cardID))));
                     }}
-                    success
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     style={[styles.alignSelfStart, styles.mt3]}
-                    text={translate('workspace.expensifyCard.addShippingDetails')}
-                />
+                >
+                    <Button.Text>{translate('workspace.expensifyCard.addShippingDetails')}</Button.Text>
+                </Button>
             )}
             {shouldShowActivateButton && (
                 <Button
@@ -76,10 +78,11 @@ function IssueCardMessage({action, policyID}: IssueCardMessageProps) {
                         }
                         Navigation.navigate(ROUTES.REPORT_CARD_ACTIVATE.getRoute(expensifyCard.cardID, route.params?.reportID, route.params?.reportActionID));
                     }}
-                    success
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     style={[styles.alignSelfStart, styles.mt3]}
-                    text={translate('activateCardPage.activateCard')}
-                />
+                >
+                    <Button.Text>{translate('activateCardPage.activateCard')}</Button.Text>
+                </Button>
             )}
         </>
     );
diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
index 078404fed1c8..b541fd30a456 100644
--- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
+++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
@@ -453,11 +453,12 @@ function TransactionPreviewContent({
                     )}
                     {isReviewDuplicateTransactionPage && !isIOUSettled && !isApproved && !isCardTransaction && areThereDuplicates && (
                         <Button
-                            text={translate('violations.keepThisOne')}
-                            success
+                            variant={CONST.BUTTON_VARIANT.SUCCESS}
                             style={[styles.ph4, styles.pb4]}
                             onPress={navigateToReviewFields}
-                        />
+                        >
+                            <Button.Text>{translate('violations.keepThisOne')}</Button.Text>
+                        </Button>
                     )}
                 </View>
             </OfflineWithFeedback>
diff --git a/src/components/Search/FilterComponents/AdvancedFilters/AmountFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/AmountFilterContent.tsx
index 058b7b8ee6a6..8e555ed3415d 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/AmountFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/AmountFilterContent.tsx
@@ -1,5 +1,5 @@
 import AmountWithoutCurrencyInput from '@components/AmountWithoutCurrencyInput';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ScrollView from '@components/ScrollView';
 import type {SearchAmountFilterKeys, SearchAmountValues} from '@components/Search/types';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
@@ -246,12 +246,13 @@ function AmountFilterContent({baseFilterKey, value, autoFocus, largeButton, styl
             </ScrollView>
             <Button
                 style={[styles.ph5, styles.pb5]}
-                success
-                large={largeButton}
-                text={translate('common.confirm')}
-                pressOnEnter
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={largeButton ? CONST.BUTTON_SIZE.LARGE : undefined}
                 onPress={updateAmountFilter}
-            />
+            >
+                <Button.KeyboardShortcut />
+                <Button.Text>{translate('common.confirm')}</Button.Text>
+            </Button>
         </View>
     );
 }
diff --git a/src/components/Search/FilterComponents/AdvancedFilters/DateFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/DateFilterContent.tsx
index 7addd6ecf2d6..b98c43b9eb88 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/DateFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/DateFilterContent.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
 import type {DateFilterBaseHandle} from '@components/Search/FilterComponents/DateFilterBase';
@@ -12,7 +12,10 @@ import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 
+import CONST from '@src/CONST';
+
 import type {StyleProp, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
 
 import React, {useRef} from 'react';
 
@@ -21,13 +24,13 @@ type DateFilterContentProps = {
     value: SearchDateValues;
     selectedDateModifier: SearchDateModifier | null;
     hasFeed: boolean;
-    largeButton?: boolean;
+    size?: Exclude<ValueOf<typeof CONST.BUTTON_SIZE>, typeof CONST.BUTTON_SIZE.SMALL>;
     style?: StyleProp<ViewStyle>;
     onDateModifierSelected: (modifier: SearchDateModifier | null) => void;
     onChange: (values: SearchDateValues) => void;
 };
 
-function DateFilterContent({baseFilterKey, value, selectedDateModifier, hasFeed, largeButton, style, onDateModifierSelected, onChange}: DateFilterContentProps) {
+function DateFilterContent({baseFilterKey, value, selectedDateModifier, hasFeed, size, style, onDateModifierSelected, onChange}: DateFilterContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const dateFilterRef = useRef<DateFilterBaseHandle>(null);
@@ -61,12 +64,13 @@ function DateFilterContent({baseFilterKey, value, selectedDateModifier, hasFeed,
             {!!selectedDateModifier && (
                 <Button
                     style={[styles.ph5, styles.pb5, styles.pt3]}
-                    text={translate('common.apply')}
-                    success
-                    large={largeButton}
-                    pressOnEnter
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={size}
                     onPress={() => dateFilterRef.current?.save()}
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('common.apply')}</Button.Text>
+                </Button>
             )}
         </>
     );
diff --git a/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
index 92508406ae89..54ee83e84b66 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
@@ -1,27 +1,29 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ReportFieldBase from '@components/Search/FilterComponents/ReportField';
 import type {ReportFieldHandle} from '@components/Search/FilterComponents/ReportField';
 
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {PolicyReportField} from '@src/types/onyx';
 
 import type {StyleProp, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
 
 import React, {useRef, useState} from 'react';
 
 type ReportFieldFilterContentProps = {
     values: Partial<SearchAdvancedFiltersForm> | undefined;
     selectedField: PolicyReportField | null;
-    largeButton?: boolean;
+    size?: Exclude<ValueOf<typeof CONST.BUTTON_SIZE>, typeof CONST.BUTTON_SIZE.SMALL>;
     style?: StyleProp<ViewStyle>;
     onFieldSelected: (field: PolicyReportField | null) => void;
     onChange: (values: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
-function ReportFieldFilterContent({values, selectedField, largeButton, style, onFieldSelected, onChange}: ReportFieldFilterContentProps) {
+function ReportFieldFilterContent({values, selectedField, size, style, onFieldSelected, onChange}: ReportFieldFilterContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const reportFieldRef = useRef<ReportFieldHandle>(null);
@@ -42,10 +44,8 @@ function ReportFieldFilterContent({values, selectedField, largeButton, style, on
             {!!selectedField && (
                 <Button
                     style={[styles.ph5, styles.pb5, styles.pt3, styles.mtAuto]}
-                    success
-                    large={largeButton}
-                    text={translate('common.apply')}
-                    pressOnEnter
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={size}
                     onPress={() => {
                         if (error) {
                             return;
@@ -58,7 +58,10 @@ function ReportFieldFilterContent({values, selectedField, largeButton, style, on
 
                         onChange(value);
                     }}
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('common.apply')}</Button.Text>
+                </Button>
             )}
         </>
     );
diff --git a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
index 7963769a44ff..bf92c39e5811 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import NegatableFilter from '@components/Search/FilterComponents/NegatableFilter';
 import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
 import type {ReportFieldTextKey, SearchTextFilterKeys} from '@components/Search/types';
@@ -14,6 +14,7 @@ import {FILTER_VIEW_MAP} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 
 import type {TextInput as RNTextInput, StyleProp, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
 
 import React, {useState} from 'react';
 import {View} from 'react-native';
@@ -22,7 +23,7 @@ type TextInputFilterContentProps = {
     baseFilterKey: Exclude<SearchTextFilterKeys, typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT | ReportFieldTextKey>;
     value: string | undefined;
     isNegated: boolean;
-    largeButton?: boolean;
+    size?: Exclude<ValueOf<typeof CONST.BUTTON_SIZE>, typeof CONST.BUTTON_SIZE.SMALL>;
     autoFocus?: boolean;
     style?: StyleProp<ViewStyle>;
     onChange: (value: string | undefined, isNegated: boolean) => void;
@@ -32,7 +33,7 @@ function isTextInput(element: BaseTextInputRef | RNTextInput | null): element is
     return !!element && 'isFocused' in element;
 }
 
-function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated: initialIsNegated, autoFocus, largeButton, style, onChange}: TextInputFilterContentProps) {
+function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated: initialIsNegated, autoFocus, size, style, onChange}: TextInputFilterContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [value, setValue] = useState(initialValue);
@@ -68,17 +69,18 @@ function TextInputFilterContent({baseFilterKey, value: initialValue, isNegated:
             </NegatableFilter>
             <Button
                 style={[styles.ph5, styles.pb5]}
-                success
-                large={largeButton}
-                text={translate('common.confirm')}
-                pressOnEnter
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={size}
                 onPress={() => {
                     if (error) {
                         return;
                     }
                     onChange(value, isNegated);
                 }}
-            />
+            >
+                <Button.KeyboardShortcut />
+                <Button.Text>{translate('common.confirm')}</Button.Text>
+            </Button>
         </View>
     );
 }
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 52dcb53f7505..0cb5d5c4f355 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -261,11 +261,12 @@ function DateFilterBase({
                 <>
                     {!selectedDateModifier && (
                         <Button
-                            text={translate('common.reset')}
                             onPress={reset}
                             style={[styles.mh4, styles.mt4]}
-                            large
-                        />
+                            size={CONST.BUTTON_SIZE.LARGE}
+                        >
+                            <Button.Text>{translate('common.reset')}</Button.Text>
+                        </Button>
                     )}
                     <FormAlertWithSubmitButton
                         buttonText={translate('common.save')}
diff --git a/src/components/Search/FilterDropdowns/ActionButtons.tsx b/src/components/Search/FilterDropdowns/ActionButtons.tsx
index deb356367485..64a1755f7f28 100644
--- a/src/components/Search/FilterDropdowns/ActionButtons.tsx
+++ b/src/components/Search/FilterDropdowns/ActionButtons.tsx
@@ -1,8 +1,10 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import CONST from '@src/CONST';
+
 import React from 'react';
 import {View} from 'react-native';
 
@@ -22,21 +24,23 @@ function ActionButtons({containerStyle, resetSentryLabel, applySentryLabel, onRe
         <View style={containerStyle}>
             {!!onReset && (
                 <Button
-                    medium
+                    size={CONST.BUTTON_SIZE.MEDIUM}
                     style={[styles.flex1]}
-                    text={translate('common.reset')}
                     onPress={onReset}
                     sentryLabel={resetSentryLabel}
-                />
+                >
+                    <Button.Text>{translate('common.reset')}</Button.Text>
+                </Button>
             )}
             <Button
-                success
-                medium
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={CONST.BUTTON_SIZE.MEDIUM}
                 style={[styles.flex1]}
-                text={translate('common.apply')}
                 onPress={onApply}
                 sentryLabel={applySentryLabel}
-            />
+            >
+                <Button.Text>{translate('common.apply')}</Button.Text>
+            </Button>
         </View>
     );
 }
diff --git a/src/components/Search/SearchFilterPageFooterButtons.tsx b/src/components/Search/SearchFilterPageFooterButtons.tsx
index ba656925f484..4df6e1531af6 100644
--- a/src/components/Search/SearchFilterPageFooterButtons.tsx
+++ b/src/components/Search/SearchFilterPageFooterButtons.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -24,22 +24,24 @@ function SearchFilterPageFooterButtons({resetChanges, applyChanges}: SearchFilte
         <View>
             {!!resetChanges && (
                 <Button
-                    large
+                    size={CONST.BUTTON_SIZE.LARGE}
                     style={[styles.mt3]}
-                    text={translate('common.reset')}
                     onPress={resetChanges}
                     sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_RESET_BUTTON}
-                />
+                >
+                    <Button.Text>{translate('common.reset')}</Button.Text>
+                </Button>
             )}
             <Button
-                large
-                success
-                pressOnEnter
+                size={CONST.BUTTON_SIZE.LARGE}
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
                 style={[styles.mt3]}
-                text={translate('common.save')}
                 onPress={applyChanges}
                 sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_SAVE_BUTTON}
-            />
+            >
+                <Button.KeyboardShortcut />
+                <Button.Text>{translate('common.save')}</Button.Text>
+            </Button>
         </View>
     );
 }
diff --git a/src/components/Search/SearchList/ListItem/ActionCell/DeferredActionCell.tsx b/src/components/Search/SearchList/ListItem/ActionCell/DeferredActionCell.tsx
index 825edbcd58eb..1f8db06fd0b8 100644
--- a/src/components/Search/SearchList/ListItem/ActionCell/DeferredActionCell.tsx
+++ b/src/components/Search/SearchList/ListItem/ActionCell/DeferredActionCell.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -32,14 +32,14 @@ function DeferredActionCell(actionCellProps: DeferredActionCellProps) {
 
         return (
             <Button
-                text={text}
-                small={!actionCellProps.extraSmall}
-                extraSmall={actionCellProps.extraSmall}
+                size={CONST.BUTTON_SIZE.SMALL}
                 style={[styles.w100, styles.pointerEventsNone]}
                 isDisabled
-                success={isSuccess}
+                variant={isSuccess ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
                 isNested
-            />
+            >
+                <Button.Text>{text}</Button.Text>
+            </Button>
         );
     }
 
diff --git a/src/components/Search/SearchList/ListItem/ActionCell/index.tsx b/src/components/Search/SearchList/ListItem/ActionCell/index.tsx
index cb243f936a07..1a23a0264e7d 100644
--- a/src/components/Search/SearchList/ListItem/ActionCell/index.tsx
+++ b/src/components/Search/SearchList/ListItem/ActionCell/index.tsx
@@ -1,4 +1,5 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
+import LinkButton from '@components/ButtonComposed/composed/LinkButton';
 
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -32,7 +33,6 @@ type ActionCellProps = {
     reportID?: string;
     hash?: number;
     amount?: number;
-    extraSmall?: boolean;
     shouldDisablePointerEvents?: boolean;
     chatReport?: OnyxEntry<Report>;
 };
@@ -47,7 +47,6 @@ function ActionCell({
     reportID = '',
     hash,
     amount,
-    extraSmall = false,
     shouldDisablePointerEvents,
     chatReport,
 }: ActionCellProps) {
@@ -62,24 +61,23 @@ function ActionCell({
 
     if (shouldUseViewAction || (isChildListItem && action !== CONST.SEARCH.ACTION_TYPES.UNDELETE)) {
         const text = translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW]);
-        const buttonInnerStyles = isSelected ? styles.buttonDefaultSelected : {};
+        const buttonInnerStyles = isSelected && styles.buttonDefaultSelected;
+        const ViewButton = isChildListItem ? LinkButton : Button;
 
         return (
-            <Button
+            <ViewButton
                 testID="ActionCell"
-                text={text}
                 onPress={onButtonPress}
-                small={!extraSmall}
-                extraSmall={extraSmall}
+                size={CONST.BUTTON_SIZE.SMALL}
                 style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
                 isDisabled={shouldDisablePointerEvents}
-                shouldStayNormalOnDisable={shouldDisablePointerEvents}
+                stayNormalOnDisable={shouldDisablePointerEvents}
                 innerStyles={buttonInnerStyles}
-                link={isChildListItem}
-                shouldUseDefaultHover={!isChildListItem}
                 isNested
                 sentryLabel={CONST.SENTRY_LABEL.SEARCH.ACTION_CELL_VIEW}
-            />
+            >
+                <ViewButton.Text>{text}</ViewButton.Text>
+            </ViewButton>
         );
     }
 
@@ -106,23 +104,23 @@ function ActionCell({
     const text = shouldUseMarkAsDone ? translate('common.done') : translate(actionTranslationsMap[action]);
 
     const shouldBeDisabledOffline = action !== CONST.SEARCH.ACTION_TYPES.UNDELETE && isOffline;
-    const buttonInnerStyles = isSelected && action === CONST.SEARCH.ACTION_TYPES.UNDELETE ? styles.buttonDefaultSelected : {};
+    const buttonInnerStyles = isSelected && action === CONST.SEARCH.ACTION_TYPES.UNDELETE && styles.buttonDefaultSelected;
 
     return (
         <Button
-            text={text}
             onPress={onButtonPress}
-            small={!extraSmall}
-            extraSmall={extraSmall}
+            size={CONST.BUTTON_SIZE.SMALL}
             style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
             isLoading={isLoading}
-            success={action !== CONST.SEARCH.ACTION_TYPES.UNDELETE}
+            variant={action !== CONST.SEARCH.ACTION_TYPES.UNDELETE ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
             isDisabled={shouldBeDisabledOffline || shouldDisablePointerEvents}
-            shouldStayNormalOnDisable={shouldDisablePointerEvents}
+            stayNormalOnDisable={shouldDisablePointerEvents}
             innerStyles={buttonInnerStyles}
             isNested
             sentryLabel={CONST.SENTRY_LABEL.SEARCH.ACTION_CELL_ACTION}
-        />
+        >
+            <Button.Text>{text}</Button.Text>
+        </Button>
     );
 }
 
diff --git a/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx b/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
index 898edbba66bc..c5a29cc4fce0 100644
--- a/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
+++ b/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
@@ -1,6 +1,6 @@
 import Avatar from '@components/Avatar';
 import Badge from '@components/Badge';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
 import {useSession} from '@components/OnyxListItemProvider';
 import TextWithTooltip from '@components/TextWithTooltip';
@@ -114,15 +114,16 @@ function ActionCell({taskItem, isLargeScreenWidth}: TaskCellProps) {
 
     return (
         <Button
-            small
-            success
-            text={translate('task.action')}
+            size={CONST.BUTTON_SIZE.SMALL}
+            variant={CONST.BUTTON_VARIANT.SUCCESS}
             style={[styles.w100]}
             isDisabled={!isTaskActionable}
             onPress={callFunctionIfActionIsAllowed(() => {
                 completeTask(taskItem as Report, parentReport?.hasOutstandingChildTask ?? false, hasOutstandingChildTask, parentReportAction, delegateEmail, taskItem.reportID);
             })}
-        />
+        >
+            <Button.Text>{translate('task.action')}</Button.Text>
+        </Button>
     );
 }
 
diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
index 47746cb3dc2e..69b8a406b3fe 100644
--- a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
@@ -1,5 +1,5 @@
 import ActivityIndicator from '@components/ActivityIndicator';
-import Button from '@components/Button';
+import LinkButton from '@components/ButtonComposed/composed/LinkButton';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScrollView from '@components/ScrollView';
@@ -390,16 +390,14 @@ function TransactionGroupListExpandedImpl({
             })}
             {shouldDisplayShowMoreButton && !shouldDisplayLoadingIndicator && (
                 <View style={[styles.w100, styles.flexRow, isLargeScreenWidth && styles.pl10]}>
-                    <Button
-                        text={translate('common.showMore')}
+                    <LinkButton
                         onPress={onShowMoreButtonPress}
-                        link
-                        shouldUseDefaultHover={false}
                         isNested
-                        medium
-                        innerStyles={[styles.ph3]}
-                        textStyles={[styles.fontSizeNormal]}
-                    />
+                        size={CONST.BUTTON_SIZE.MEDIUM}
+                        innerStyles={[styles.ph2]}
+                    >
+                        <LinkButton.Text style={[styles.fontSizeNormal]}>{translate('common.showMore')}</LinkButton.Text>
+                    </LinkButton>
                 </View>
             )}
             {shouldDisplayLoadingIndicator && (
diff --git a/src/components/SpendRules/SpendRuleRestrictionTypeToggle.tsx b/src/components/SpendRules/SpendRuleRestrictionTypeToggle.tsx
index 1f2a3b498dd0..949c4b1f1f2a 100644
--- a/src/components/SpendRules/SpendRuleRestrictionTypeToggle.tsx
+++ b/src/components/SpendRules/SpendRuleRestrictionTypeToggle.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Text from '@components/Text';
 
 import useLocalize from '@hooks/useLocalize';
@@ -40,37 +40,37 @@ function SpendRuleRestrictionTypeToggle({restrictionAction, onSelect}: SpendRule
                 <Text style={[styles.flex1, styles.alignSelfCenter]}>{translate('workspace.rules.spendRules.restrictMerchants')}</Text>
                 <View style={[styles.flexRow, styles.border, styles.borderRadiusNormal]}>
                     <Button
-                        text={translate('common.off')}
-                        small
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.ph0}
-                        innerStyles={!isOffSelected ? styles.bgTransparent : undefined}
-                        textStyles={[styles.alignSelfCenter, !isOffSelected ? styles.textSupporting : undefined]}
+                        innerStyles={!isOffSelected && styles.bgTransparent}
                         accessibilityLabel={translate('common.off')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_RESTRICTION_TYPE}
                         onPress={() => onSelect(null)}
-                    />
+                    >
+                        <Button.Text style={[styles.alignSelfCenter, !isOffSelected && styles.textSupporting]}>{translate('common.off')}</Button.Text>
+                    </Button>
                     <Button
-                        text={translate('workspace.rules.spendRules.allow')}
-                        success={isAllowSelected}
-                        small
+                        variant={isAllowSelected ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.ph0}
-                        innerStyles={!isAllowSelected ? styles.bgTransparent : undefined}
-                        textStyles={[styles.alignSelfCenter, !isAllowSelected ? styles.textSupporting : undefined]}
+                        innerStyles={!isAllowSelected && styles.bgTransparent}
                         accessibilityLabel={translate('workspace.rules.spendRules.allow')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_RESTRICTION_TYPE}
                         onPress={() => onSelect(CONST.SPEND_RULES.ACTION.ALLOW)}
-                    />
+                    >
+                        <Button.Text style={[styles.alignSelfCenter, !isAllowSelected && styles.textSupporting]}>{translate('workspace.rules.spendRules.allow')}</Button.Text>
+                    </Button>
                     <Button
-                        text={translate('workspace.rules.spendRules.block')}
-                        danger={isBlockSelected}
-                        small
+                        variant={isBlockSelected ? CONST.BUTTON_VARIANT.DANGER : undefined}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.ph0}
-                        innerStyles={!isBlockSelected ? styles.bgTransparent : undefined}
-                        textStyles={[styles.alignSelfCenter, !isBlockSelected ? styles.textSupporting : undefined]}
+                        innerStyles={!isBlockSelected && styles.bgTransparent}
                         accessibilityLabel={translate('workspace.rules.spendRules.block')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_RESTRICTION_TYPE}
                         onPress={() => onSelect(CONST.SPEND_RULES.ACTION.BLOCK)}
-                    />
+                    >
+                        <Button.Text style={[styles.alignSelfCenter, !isBlockSelected && styles.textSupporting]}>{translate('workspace.rules.spendRules.block')}</Button.Text>
+                    </Button>
                 </View>
             </View>
             <Text style={[styles.mutedNormalTextLabel, styles.pt3]}>{restrictionTypeHelperText}</Text>
diff --git a/src/components/SpendRules/SpendRuleRestrictionTypeToggleRevamp.tsx b/src/components/SpendRules/SpendRuleRestrictionTypeToggleRevamp.tsx
index 6d8f25be1584..92810fb3dc9b 100644
--- a/src/components/SpendRules/SpendRuleRestrictionTypeToggleRevamp.tsx
+++ b/src/components/SpendRules/SpendRuleRestrictionTypeToggleRevamp.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
 import Text from '@components/Text';
 
@@ -56,37 +56,37 @@ function SpendRuleRestrictionTypeToggleRevamp({restrictionAction, onSelect, icon
                 <Text style={[styles.flex1, styles.pr3, styles.alignSelfCenter]}>{translate('workspace.rules.spendRules.restrictMerchants')}</Text>
                 <View style={[styles.flexRow, styles.border, styles.borderRadiusNormal]}>
                     <Button
-                        text={translate('common.off')}
                         onPress={() => onSelect(null)}
-                        small
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.ph0}
-                        innerStyles={!isOffSelected ? styles.bgTransparent : undefined}
-                        textStyles={[styles.alignSelfCenter, !isOffSelected ? styles.textSupporting : undefined]}
+                        innerStyles={!isOffSelected && styles.bgTransparent}
                         accessibilityLabel={translate('common.off')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_RESTRICTION_TYPE}
-                    />
+                    >
+                        <Button.Text style={[styles.alignSelfCenter, !isOffSelected && styles.textSupporting]}>{translate('common.off')}</Button.Text>
+                    </Button>
                     <Button
-                        text={translate('workspace.rules.spendRules.allow')}
                         onPress={() => onSelect(CONST.SPEND_RULES.ACTION.ALLOW)}
-                        success={isAllowSelected}
-                        small
+                        variant={isAllowSelected ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.ph0}
-                        innerStyles={!isAllowSelected ? styles.bgTransparent : undefined}
-                        textStyles={[styles.alignSelfCenter, !isAllowSelected ? styles.textSupporting : undefined]}
+                        innerStyles={!isAllowSelected && styles.bgTransparent}
                         accessibilityLabel={translate('workspace.rules.spendRules.allow')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_RESTRICTION_TYPE}
-                    />
+                    >
+                        <Button.Text style={[styles.alignSelfCenter, !isAllowSelected && styles.textSupporting]}>{translate('workspace.rules.spendRules.allow')}</Button.Text>
+                    </Button>
                     <Button
-                        text={translate('workspace.rules.spendRules.block')}
                         onPress={() => onSelect(CONST.SPEND_RULES.ACTION.BLOCK)}
-                        danger={isBlockSelected}
-                        small
+                        variant={isBlockSelected ? CONST.BUTTON_VARIANT.DANGER : undefined}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.ph0}
-                        innerStyles={!isBlockSelected ? styles.bgTransparent : undefined}
-                        textStyles={[styles.alignSelfCenter, !isBlockSelected ? styles.textSupporting : undefined]}
+                        innerStyles={!isBlockSelected && styles.bgTransparent}
                         accessibilityLabel={translate('workspace.rules.spendRules.block')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_RESTRICTION_TYPE}
-                    />
+                    >
+                        <Button.Text style={[styles.alignSelfCenter, !isBlockSelected && styles.textSupporting]}>{translate('workspace.rules.spendRules.block')}</Button.Text>
+                    </Button>
                 </View>
             </View>
             <Text style={[styles.mutedNormalTextLabel, styles.pt3]}>{restrictionTypeHelperText}</Text>
diff --git a/src/pages/Search/SearchAdvancedFiltersContentPage/DateFilterContentPageWrapper.tsx b/src/pages/Search/SearchAdvancedFiltersContentPage/DateFilterContentPageWrapper.tsx
index 02cfbce27892..a2d58ff17f39 100644
--- a/src/pages/Search/SearchAdvancedFiltersContentPage/DateFilterContentPageWrapper.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersContentPage/DateFilterContentPageWrapper.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import DateFilterContent from '@components/Search/FilterComponents/AdvancedFilters/DateFilterContent';
 import type {DateFilterContentWrapperProps} from '@components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent';
 
@@ -7,6 +7,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 
+import CONST from '@src/CONST';
+
 import React, {useState} from 'react';
 import {View} from 'react-native';
 
@@ -23,7 +25,7 @@ function DateFilterContentPageWrapper({baseFilterKey, value: initialValue, hasFe
                 value={value}
                 selectedDateModifier={selectedDateModifier}
                 hasFeed={hasFeed}
-                largeButton
+                size={CONST.BUTTON_SIZE.LARGE}
                 style={[styles.flex1]}
                 onDateModifierSelected={setSelectedDateModifier}
                 onChange={setValue}
@@ -31,12 +33,13 @@ function DateFilterContentPageWrapper({baseFilterKey, value: initialValue, hasFe
             {!selectedDateModifier && (
                 <Button
                     style={[styles.ph5, styles.pb5, styles.pt3]}
-                    success
-                    large
-                    text={translate('common.confirm')}
-                    pressOnEnter
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     onPress={() => onChange(value)}
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('common.confirm')}</Button.Text>
+                </Button>
             )}
         </View>
     );
diff --git a/src/pages/Search/SearchAdvancedFiltersContentPage/ReportFieldFilterContentPageWrapper.tsx b/src/pages/Search/SearchAdvancedFiltersContentPage/ReportFieldFilterContentPageWrapper.tsx
index a8a7f838456b..7a67f2902cac 100644
--- a/src/pages/Search/SearchAdvancedFiltersContentPage/ReportFieldFilterContentPageWrapper.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersContentPage/ReportFieldFilterContentPageWrapper.tsx
@@ -1,10 +1,11 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ReportFieldFilterContent from '@components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent';
 import type {ReportFieldFilterContentWrapperProps} from '@components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent';
 
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import CONST from '@src/CONST';
 import type {PolicyReportField} from '@src/types/onyx';
 
 import React, {useState} from 'react';
@@ -21,17 +22,15 @@ function ReportFieldFilterContentPageWrapper({values: initialValues, onChange}:
             <ReportFieldFilterContent
                 values={values}
                 selectedField={selectedField}
-                largeButton
+                size={CONST.BUTTON_SIZE.LARGE}
                 onFieldSelected={setSelectedField}
                 onChange={(newValues) => setValues((prevValues) => ({...prevValues, ...newValues}))}
             />
             {!selectedField && (
                 <Button
                     style={[styles.ph5, styles.pb5, styles.pt3, styles.mtAuto]}
-                    success
-                    large
-                    text={translate('common.confirm')}
-                    pressOnEnter
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     onPress={() => {
                         if (!values) {
                             return;
@@ -39,7 +38,10 @@ function ReportFieldFilterContentPageWrapper({values: initialValues, onChange}:
 
                         onChange(values);
                     }}
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('common.confirm')}</Button.Text>
+                </Button>
             )}
         </View>
     );
diff --git a/src/pages/Search/SearchAdvancedFiltersContentPage/TextInputFilterContentPageWrapper.tsx b/src/pages/Search/SearchAdvancedFiltersContentPage/TextInputFilterContentPageWrapper.tsx
index 6681735ff4b3..d2b9a605ab27 100644
--- a/src/pages/Search/SearchAdvancedFiltersContentPage/TextInputFilterContentPageWrapper.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersContentPage/TextInputFilterContentPageWrapper.tsx
@@ -1,6 +1,8 @@
 import type {TextInputFilterContentWrapperProps} from '@components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent';
 import TextInputFilterContent from '@components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent';
 
+import CONST from '@src/CONST';
+
 import React from 'react';
 
 function TextInputFilterContentPageWrapper({baseFilterKey, value, isNegated, onChange}: TextInputFilterContentWrapperProps) {
@@ -10,7 +12,7 @@ function TextInputFilterContentPageWrapper({baseFilterKey, value, isNegated, onC
             value={value}
             isNegated={isNegated}
             autoFocus
-            largeButton
+            size={CONST.BUTTON_SIZE.LARGE}
             onChange={onChange}
         />
     );
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchAdvancedFiltersBase.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchAdvancedFiltersBase.tsx
index 5eea2db68804..6c3c67642277 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchAdvancedFiltersBase.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchAdvancedFiltersBase.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import FilterList from '@components/Search/FilterComponents/AdvancedFilters/FilterList';
@@ -39,18 +39,20 @@ function SearchAdvancedFiltersBase() {
             {shouldShowResetFilters && (
                 <Button
                     style={[styles.ph5, styles.pb3]}
-                    large
-                    text={translate('common.reset')}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     onPress={resetFilters}
-                />
+                >
+                    <Button.Text>{translate('common.reset')}</Button.Text>
+                </Button>
             )}
             <Button
                 style={[styles.ph5, styles.pb5]}
-                success
-                large
-                text={translate('search.applyFilters')}
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={CONST.BUTTON_SIZE.LARGE}
                 onPress={applyFilters}
-            />
+            >
+                <Button.Text>{translate('search.applyFilters')}</Button.Text>
+            </Button>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/Search/SearchEditMultiple/SearchEditMultiplePage.tsx b/src/pages/Search/SearchEditMultiple/SearchEditMultiplePage.tsx
index 1eadb5b76f42..b7d2f30b12ce 100644
--- a/src/pages/Search/SearchEditMultiple/SearchEditMultiplePage.tsx
+++ b/src/pages/Search/SearchEditMultiple/SearchEditMultiplePage.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -348,14 +348,15 @@ function SearchEditMultiplePage() {
                     ))}
                 </ScrollView>
                 <Button
-                    success
-                    large
-                    text={translate('common.save')}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     onPress={save}
                     isLoading={isSaving}
                     isDisabled={isSaving}
                     style={[styles.m5]}
-                />
+                >
+                    <Button.Text>{translate('common.save')}</Button.Text>
+                </Button>
             </View>
         </ScreenWrapper>
     );
diff --git a/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx b/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx
index faf8e24a7c7f..4e28a7f630ca 100644
--- a/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx
+++ b/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx
@@ -90,7 +90,7 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
         if (isActionableAddPaymentCard(action) && !doesUserHavePaymentCardAdded(userBillingFundID) && shouldRenderAddPaymentCard()) {
             return [
                 {
-                    text: 'subscription.cardSection.addCardButton',
+                    translationKey: 'subscription.cardSection.addCardButton',
                     key: `${action.reportActionID}-actionableAddPaymentCard-submit`,
                     onPress: () => {
                         Navigation.navigate(ROUTES.SETTINGS_SUBSCRIPTION_ADD_PAYMENT_CARD);
@@ -169,7 +169,6 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
             if (followups && followups.length > 0) {
                 return followups.map((followup) => ({
                     text: followup.text,
-                    shouldUseLocalization: false,
                     key: `${action.reportActionID}-followup-${followup.text}`,
                     onPress: () => {
                         resolveSuggestedFollowup(
@@ -211,8 +210,8 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
                 categorize: CONST.IOU.ACTION.CATEGORIZE,
                 share: CONST.IOU.ACTION.SHARE,
             } as const;
-            const prepareTrackExpenseButton = (actionKey: keyof typeof TRACK_EXPENSE_ACTIONS, extraParams?: Partial<CreateDraftTransactionParams>) => ({
-                text: `actionableMentionTrackExpense.${actionKey}`,
+            const prepareTrackExpenseButton = (actionKey: keyof typeof TRACK_EXPENSE_ACTIONS, extraParams?: Partial<CreateDraftTransactionParams>): ActionableItem => ({
+                translationKey: `actionableMentionTrackExpense.${actionKey}`,
                 key: `${action.reportActionID}-actionableMentionTrackExpense-${actionKey}`,
                 onPress: () => {
                     createDraftTransactionAndNavigateToParticipantSelector({
@@ -226,7 +225,7 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
             // On the Submit (submit2026) plan, "Submit it to someone" splits into two destinations:
             // submit to an individual ("a friend") or route to a submit-enabled workspace ("my employer").
             const prepareSubmitDestinationButton = (destination: ValueOf<typeof CONST.IOU.SUBMIT_DESTINATION>, textKey: 'submitToFriend' | 'submitToEmployer'): ActionableItem => ({
-                text: `actionableMentionTrackExpense.${textKey}`,
+                translationKey: `actionableMentionTrackExpense.${textKey}`,
                 key: `${action.reportActionID}-actionableMentionTrackExpense-${textKey}`,
                 onPress: () => {
                     createDraftTransactionAndNavigateToParticipantSelector({
@@ -256,7 +255,7 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
                 options.push(prepareTrackExpenseButton('categorize'), prepareTrackExpenseButton('share'));
             }
             options.push({
-                text: 'actionableMentionTrackExpense.nothing',
+                translationKey: 'actionableMentionTrackExpense.nothing',
                 key: `${action.reportActionID}-actionableMentionTrackExpense-nothing`,
                 onPress: () => {
                     dismissTrackExpenseActionableWhisper(actionOwnerReportID, action);
@@ -284,13 +283,14 @@ function ChatActionableButtons({action, originalReportID, reportID, hasPendingFo
         <ActionableItemButtons
             items={actionableItemButtons}
             layout={isActionableTrackExpense(action) || isPhrasalConciergeOptions ? 'vertical' : 'horizontal'}
-            shouldUseLocalization={!isPhrasalConciergeOptions}
-            primaryTextNumberOfLines={actionableButtonsNoLines}
-            styles={{
-                text: isPhrasalConciergeOptions ? styles.actionableItemButtonText : undefined,
-                button: isPhrasalConciergeOptions ? styles.actionableItemButton : undefined,
+            textProps={{
+                numberOfLines: actionableButtonsNoLines,
+                style: isPhrasalConciergeOptions && styles.actionableItemButtonText,
             }}
-            wrapperStyle={isPhrasalConciergeOptions ? styles.mt4 : undefined}
+            buttonProps={{
+                innerStyles: isPhrasalConciergeOptions && styles.actionableItemButton,
+            }}
+            wrapperStyle={isPhrasalConciergeOptions && styles.mt4}
         />
     );
 }
diff --git a/src/pages/inbox/report/actionContents/ConfirmWhisperContent.tsx b/src/pages/inbox/report/actionContents/ConfirmWhisperContent.tsx
index 507d2273e600..5581be55b90f 100644
--- a/src/pages/inbox/report/actionContents/ConfirmWhisperContent.tsx
+++ b/src/pages/inbox/report/actionContents/ConfirmWhisperContent.tsx
@@ -41,7 +41,7 @@ function ConfirmWhisperContent({action, reportID, originalReportID, actionOwnerR
 
     const buttons: ActionableItem[] = [
         {
-            text: 'common.buttonConfirm',
+            translationKey: 'common.buttonConfirm',
             key: `${action.reportActionID}-actionableReportMentionConfirmWhisper-${CONST.REPORT.ACTIONABLE_MENTION_INVITE_TO_SUBMIT_EXPENSE_CONFIRM_WHISPER.DONE}`,
             onPress: () =>
                 resolveActionableMentionConfirmWhisper(actionOwnerReport, action, CONST.REPORT.ACTIONABLE_MENTION_INVITE_TO_SUBMIT_EXPENSE_CONFIRM_WHISPER.DONE, isOriginalReportArchived),
@@ -59,7 +59,6 @@ function ConfirmWhisperContent({action, reportID, originalReportID, actionOwnerR
                 />
                 <ActionableItemButtons
                     items={buttons}
-                    shouldUseLocalization
                     layout="horizontal"
                 />
             </View>
diff --git a/src/pages/inbox/report/actionContents/FraudAlertContent.tsx b/src/pages/inbox/report/actionContents/FraudAlertContent.tsx
index c02cdf3d7c83..ee4a57815b7b 100644
--- a/src/pages/inbox/report/actionContents/FraudAlertContent.tsx
+++ b/src/pages/inbox/report/actionContents/FraudAlertContent.tsx
@@ -38,7 +38,7 @@ function FraudAlertContent({action, reportID}: FraudAlertContentProps) {
         ? []
         : [
               {
-                  text: 'cardPage.cardFraudAlert.confirmButtonText',
+                  translationKey: 'cardPage.cardFraudAlert.confirmButtonText',
                   key: `${action.reportActionID}-cardFraudAlert-confirm`,
                   onPress: () => {
                       resolveFraudAlert(cardID, false, reportID, reportActionID, possibleFraud);
@@ -46,7 +46,7 @@ function FraudAlertContent({action, reportID}: FraudAlertContentProps) {
                   isPrimary: true,
               },
               {
-                  text: 'cardPage.cardFraudAlert.reportFraudButtonText',
+                  translationKey: 'cardPage.cardFraudAlert.reportFraudButtonText',
                   key: `${action.reportActionID}-cardFraudAlert-reportFraud`,
                   onPress: () => {
                       resolveFraudAlert(cardID, true, reportID, reportActionID, possibleFraud);
@@ -65,7 +65,6 @@ function FraudAlertContent({action, reportID}: FraudAlertContentProps) {
             {buttons.length > 0 && (
                 <ActionableItemButtons
                     items={buttons}
-                    shouldUseLocalization
                     layout="horizontal"
                 />
             )}
diff --git a/src/pages/inbox/report/actionContents/JoinRequestContent.tsx b/src/pages/inbox/report/actionContents/JoinRequestContent.tsx
index 96bc8001d10f..0a2994631411 100644
--- a/src/pages/inbox/report/actionContents/JoinRequestContent.tsx
+++ b/src/pages/inbox/report/actionContents/JoinRequestContent.tsx
@@ -33,13 +33,13 @@ function JoinRequestContent({action, actionOwnerReportID, policyID}: JoinRequest
             ? []
             : [
                   {
-                      text: 'actionableMentionJoinWorkspaceOptions.accept',
+                      translationKey: 'actionableMentionJoinWorkspaceOptions.accept',
                       key: `${action.reportActionID}-actionableMentionJoinWorkspace-${CONST.REPORT.ACTIONABLE_MENTION_JOIN_WORKSPACE_RESOLUTION.ACCEPT}`,
                       onPress: () => acceptJoinRequest(actionOwnerReportID, action),
                       isPrimary: true,
                   },
                   {
-                      text: 'actionableMentionJoinWorkspaceOptions.decline',
+                      translationKey: 'actionableMentionJoinWorkspaceOptions.decline',
                       key: `${action.reportActionID}-actionableMentionJoinWorkspace-${CONST.REPORT.ACTIONABLE_MENTION_JOIN_WORKSPACE_RESOLUTION.DECLINE}`,
                       onPress: () => declineJoinRequest(actionOwnerReportID, action),
                   },
@@ -51,7 +51,6 @@ function JoinRequestContent({action, actionOwnerReportID, policyID}: JoinRequest
             {buttons.length > 0 && (
                 <ActionableItemButtons
                     items={buttons}
-                    shouldUseLocalization
                     layout="horizontal"
                 />
             )}
diff --git a/src/pages/inbox/report/actionContents/MentionWhisperContent.tsx b/src/pages/inbox/report/actionContents/MentionWhisperContent.tsx
index 7386382a9466..019b3c11d162 100644
--- a/src/pages/inbox/report/actionContents/MentionWhisperContent.tsx
+++ b/src/pages/inbox/report/actionContents/MentionWhisperContent.tsx
@@ -58,7 +58,7 @@ function MentionWhisperContent({action, actionOwnerReportStable, parentReport, o
     const buttons: ActionableItem[] = [];
     if ((isPolicyAdmin(policy) || isPolicyOwner(policy, currentUserAccountID)) && isReportInPolicy && !isSystemUserMentioned(action) && !hasMentionedPolicyMembers) {
         buttons.push({
-            text: 'actionableMentionWhisperOptions.inviteToSubmitExpense',
+            translationKey: 'actionableMentionWhisperOptions.inviteToSubmitExpense',
             key: `${action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE_TO_SUBMIT_EXPENSE}`,
             onPress: () =>
                 resolveActionableMentionWhisper(
@@ -72,12 +72,12 @@ function MentionWhisperContent({action, actionOwnerReportStable, parentReport, o
     }
     buttons.push(
         {
-            text: 'actionableMentionWhisperOptions.inviteToChat',
+            translationKey: 'actionableMentionWhisperOptions.inviteToChat',
             key: `${action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE}`,
             onPress: () => resolveActionableMentionWhisper(actionOwnerReport, action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.INVITE, isOriginalReportArchived, parentReport),
         },
         {
-            text: 'actionableMentionWhisperOptions.nothing',
+            translationKey: 'actionableMentionWhisperOptions.nothing',
             key: `${action.reportActionID}-actionableMentionWhisper-${CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING}`,
             onPress: () => resolveActionableMentionWhisper(actionOwnerReport, action, CONST.REPORT.ACTIONABLE_MENTION_WHISPER_RESOLUTION.NOTHING, isOriginalReportArchived, parentReport),
         },
@@ -89,7 +89,6 @@ function MentionWhisperContent({action, actionOwnerReportStable, parentReport, o
             {buttons.length > 0 && (
                 <ActionableItemButtons
                     items={buttons}
-                    shouldUseLocalization
                     layout="vertical"
                 />
             )}
diff --git a/src/pages/inbox/report/actionContents/ReportMentionWhisperContent.tsx b/src/pages/inbox/report/actionContents/ReportMentionWhisperContent.tsx
index 97e3d8866f53..03325b14f6e1 100644
--- a/src/pages/inbox/report/actionContents/ReportMentionWhisperContent.tsx
+++ b/src/pages/inbox/report/actionContents/ReportMentionWhisperContent.tsx
@@ -44,13 +44,13 @@ function ReportMentionWhisperContent({action, reportID, actionOwnerReportStable}
         ? []
         : [
               {
-                  text: 'common.yes',
+                  translationKey: 'common.yes',
                   key: `${action.reportActionID}-actionableReportMentionWhisper-${CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.CREATE}`,
                   onPress: () => resolveActionableReportMentionWhisper(actionOwnerReport, action, CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.CREATE, isReportArchived),
                   isPrimary: true,
               },
               {
-                  text: 'common.no',
+                  translationKey: 'common.no',
                   key: `${action.reportActionID}-actionableReportMentionWhisper-${CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.NOTHING}`,
                   onPress: () => resolveActionableReportMentionWhisper(actionOwnerReport, action, CONST.REPORT.ACTIONABLE_REPORT_MENTION_WHISPER_RESOLUTION.NOTHING, isReportArchived),
               },
@@ -67,7 +67,6 @@ function ReportMentionWhisperContent({action, reportID, actionOwnerReportStable}
                 {buttons.length > 0 && (
                     <ActionableItemButtons
                         items={buttons}
-                        shouldUseLocalization
                         layout="horizontal"
                     />
                 )}