Migrate Button ro ButtonComposed (batch 10)

src/components/AccountSwitcher.tsx

@@ -35,7 +35,7 @@ import {View} from 'react-native';
 import type {PopoverMenuItem} from './PopoverMenu';
 
 import Avatar from './Avatar';
-import Button from './Button';
+import Button from './ButtonComposed';
 import {ModalActions} from './Modal/Global/ModalContext';
 import PopoverMenu from './PopoverMenu';
 import {useProductTrainingContext} from './ProductTrainingContext';
@@ -308,14 +308,14 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
                         {/* View wrapper forwards the hover events Tooltip injects; Button doesn't pass them to its underlying pressable, so the tooltip wouldn't show without it */}
                         <View>
                             <Button
-                                small
+                                size={CONST.BUTTON_SIZE.SMALL}
                                 ref={buttonRef}
-                                text={translate('delegate.switch')}
                                 onPress={onPressSwitcher}
                                 sentryLabel={CONST.SENTRY_LABEL.ACCOUNT_SWITCHER.SHOW_ACCOUNTS}
-                                shouldShowRightIcon
-                                iconRight={icons.CaretUpDown}
-                            />
+                            >
+                                <Button.Text>{translate('delegate.switch')}</Button.Text>
+                                <Button.Icon src={icons.CaretUpDown} />
+                            </Button>
                         </View>
                     </TooltipToRender>
                 )}

src/components/AddExistingExpenseFooter.tsx

@@ -25,7 +25,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {isTrackIntentUserSelector} from '@selectors/Onboarding';
 import React from 'react';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import FormHelpMessage from './FormHelpMessage';
 import {usePersonalDetails, useSession} from './OnyxListItemProvider';
 
@@ -132,14 +132,14 @@ function AddExistingExpenseFooter({selectedIds, report, reportToConfirm, policy,
                 />
             )}
             <Button
-                success
-                large
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={CONST.BUTTON_SIZE.LARGE}
                 style={[styles.w100, styles.justifyContentCenter]}
-                text={translate('iou.addExistingExpenseConfirm')}
                 onPress={handleConfirm}
-                pressOnEnter
-                enterKeyEventListenerPriority={1}
-            />
+            >
+                <Button.KeyboardShortcut enterKeyEventListenerPriority={1} />
+                <Button.Text>{translate('iou.addExistingExpenseConfirm')}</Button.Text>
+            </Button>
         </>
     );
 }

src/components/AgentPromotionalBanner.tsx

@@ -5,13 +5,15 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import BillingBanner from '@pages/settings/Subscription/CardSection/BillingBanner/BillingBanner';
 
+import CONST from '@src/CONST';
+
 import type {StyleProp, ViewStyle} from 'react-native';
 
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 
 import Badge from './Badge';
-import Button from './Button';
+import Button from './ButtonComposed';
 import Text from './Text';
 
 type AgentPromotionalBannerProps = {
@@ -75,23 +77,23 @@ function AgentPromotionalBanner({title, subtitle, onDismiss, dismissSentryLabel,
             return (
                 <View style={[styles.flex0, styles.flexBasis100, styles.maxWidth100Percentage, styles.justifyContentCenter]}>
                     <Button
-                        success
-                        medium
-                        text={ctaText}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={onCtaPress}
                         sentryLabel={ctaSentryLabel}
-                    />
+                    >
+                        <Button.Text>{ctaText ?? ''}</Button.Text>
+                    </Button>
                 </View>
             );
         }
         return (
             <Button
-                success
-                medium
-                text={ctaText}
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
                 onPress={onCtaPress}
                 sentryLabel={ctaSentryLabel}
-            />
+            >
+                <Button.Text>{ctaText ?? ''}</Button.Text>
+            </Button>
         );
     }, [hasCta, shouldUseNarrowLayout, isInLandscapeMode, ctaText, onCtaPress, ctaSentryLabel, styles]);
 

src/components/AnonymousReportFooter.tsx

@@ -9,13 +9,14 @@ import variables from '@styles/variables';
 
 import {signOutAndRedirectToSignIn} from '@userActions/Session';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 import React from 'react';
 import {View} from 'react-native';
 
 import AvatarWithDisplayName from './AvatarWithDisplayName';
-import Button from './Button';
+import Button from './ButtonComposed';
 import ExpensifyWordmark from './ExpensifyWordmark';
 import Text from './Text';
 
@@ -51,12 +52,13 @@ function AnonymousReportFooter({reportID}: AnonymousReportFooterProps) {
                 </View>
                 <View style={[styles.anonymousRoomFooterSignInButton]}>
                     <Button
-                        success
-                        text={translate('common.signIn')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={() => {
                             signOutAndRedirectToSignIn();
                         }}
-                    />
+                    >
+                        <Button.Text>{translate('common.signIn')}</Button.Text>
+                    </Button>
                 </View>
             </View>
         </View>

src/components/ApprovalWorkflowSection.tsx

@@ -15,7 +15,7 @@ import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import Icon from './Icon';
 import MenuItem from './MenuItem';
 import OfflineWithFeedback from './OfflineWithFeedback';
@@ -202,13 +202,14 @@ function ApprovalWorkflowSection({
             {!isDisabled && (
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt4, styles.gap2]}>
                     <Button
-                        small
-                        icon={icons.Pencil}
-                        text={translate('workflowsPage.editWorkflowAction')}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         onPress={onPress}
                         accessibilityLabel={translate('workflowsPage.editWorkflowAction')}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.APPROVAL_WORKFLOW_SECTION}
-                    />
+                    >
+                        <Button.Icon src={icons.Pencil} />
+                        <Button.Text>{translate('workflowsPage.editWorkflowAction')}</Button.Text>
+                    </Button>
                 </View>
             )}
         </View>

src/components/AvatarPageFooter.tsx

@@ -1,11 +1,12 @@
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 
 import React from 'react';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import FixedFooter from './FixedFooter';
 
@@ -40,13 +41,14 @@ function AvatarPageFooter({validationError, phraseParam = {}, isDirty, onSave}:
                 />
             )}
             <Button
-                large
-                success
-                text={translate('common.save')}
+                size={CONST.BUTTON_SIZE.LARGE}
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
                 isDisabled={!isDirty}
                 onPress={onSave}
-                pressOnEnter
-            />
+            >
+                <Button.KeyboardShortcut />
+                <Button.Text>{translate('common.save')}</Button.Text>
+            </Button>
         </FixedFooter>
     );
 }

src/components/BankAccountVerificationView.tsx

@@ -17,7 +17,7 @@ import type {ValueOf} from 'type-fest';
 import React from 'react';
 
 import BlockingView from './BlockingViews/BlockingView';
-import Button from './Button';
+import Button from './ButtonComposed';
 import LottieAnimations from './LottieAnimations';
 
 type BankAccountVerificationViewProps = {
@@ -66,13 +66,14 @@ function BankAccountVerificationView({verificationState, children, onVerifiedBut
                         iconWidth={variables.cardPreviewHeight}
                     />
                     <Button
-                        success
-                        large
-                        text={translate('workspace.expensifyCard.goToConcierge')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
+                        size={CONST.BUTTON_SIZE.LARGE}
                         style={[styles.m5, bottomSafeAreaPaddingStyle]}
-                        pressOnEnter
                         onPress={() => Navigation.navigate(ROUTES.CONCIERGE)}
-                    />
+                    >
+                        <Button.KeyboardShortcut />
+                        <Button.Text>{translate('workspace.expensifyCard.goToConcierge')}</Button.Text>
+                    </Button>
                 </>
             );
         case CONST.EXPENSIFY_CARD.VERIFICATION_STATE.VERIFIED:
@@ -98,13 +99,14 @@ function BankAccountVerificationView({verificationState, children, onVerifiedBut
                         />
                     )}
                     <Button
-                        success
-                        large
-                        text={verifiedButtonText ?? translate('workspace.expensifyCard.gotIt')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
+                        size={CONST.BUTTON_SIZE.LARGE}
                         style={[styles.m5, bottomSafeAreaPaddingStyle]}
-                        pressOnEnter
                         onPress={onVerifiedButtonPress}
-                    />
+                    >
+                        <Button.KeyboardShortcut />
+                        <Button.Text>{verifiedButtonText ?? translate('workspace.expensifyCard.gotIt')}</Button.Text>
+                    </Button>
                 </>
             );
         default:

src/components/Banner.tsx

@@ -14,7 +14,7 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import React, {memo} from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
@@ -130,11 +130,12 @@ function Banner({
                         {children ??
                             (shouldShowButton && (
                                 <Button
-                                    success
+                                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                                     style={[styles.ph3]}
-                                    text={translate('common.chatNow')}
                                     onPress={onButtonPress}
-                                />
+                                >
+                                    <Button.Text>{translate('common.chatNow')}</Button.Text>
+                                </Button>
                             ))}
                         {shouldShowCloseButton && !!onClose && (
                             <Tooltip text={translate('common.close')}>

src/components/BaseWidgetItem.tsx

@@ -2,6 +2,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import type {ButtonVariant} from '@styles/utils/types';
 import variables from '@styles/variables';
 
 import CONST from '@src/CONST';
@@ -10,9 +11,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import React from 'react';
 import {View} from 'react-native';
 
-import type {ButtonProps} from './Button';
-
-import Button from './Button';
+import Button from './ButtonComposed';
 import Icon from './Icon';
 import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
@@ -41,11 +40,11 @@ type BaseWidgetItemProps = {
     /** Optional: fill color for the icon (defaults to white) */
     iconFill?: string;
 
-    /** Additional props to pass to the Button component for styling control */
-    buttonProps?: Partial<ButtonProps>;
+    /** The visual variant of the CTA button */
+    buttonVariant?: ButtonVariant;
 };
 
-function BaseWidgetItem({icon, iconBackgroundColor, title, subtitle, ctaText, onCtaPress, iconFill, buttonProps}: BaseWidgetItemProps) {
+function BaseWidgetItem({icon, iconBackgroundColor, title, subtitle, ctaText, onCtaPress, iconFill, buttonVariant}: BaseWidgetItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -72,14 +71,13 @@ function BaseWidgetItem({icon, iconBackgroundColor, title, subtitle, ctaText, on
                         <Text style={styles.widgetItemTitle}>{title}</Text>
                     </View>
                     <Button
-                        text={ctaText}
                         onPress={onCtaPress}
-                        small
+                        size={CONST.BUTTON_SIZE.SMALL}
                         style={styles.widgetItemButton}
-                        // Prop spreading allows parent components to pass additional button styling props (e.g., danger: true, success: true)
-
-                        {...buttonProps}
-                    />
+                        variant={buttonVariant}
+                    >
+                        <Button.Text>{ctaText}</Button.Text>
+                    </Button>
                 </View>
             )}
         </PressableWithoutFeedback>

src/components/BigNumberPad.tsx

@@ -5,10 +5,14 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import ControlSelection from '@libs/ControlSelection';
 
+import CONST from '@src/CONST';
+
+import type {ValueOf} from 'type-fest';
+
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 
 type BigNumberPadProps = {
     /** Callback to inform parent modal with key pressed */
@@ -62,6 +66,15 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
         setTimer(newTimer);
     };
 
+    let numberPadButtonSize: ValueOf<typeof CONST.BUTTON_SIZE>;
+    if (isInLandscapeMode) {
+        numberPadButtonSize = CONST.BUTTON_SIZE.SMALL;
+    } else if (isExtraSmallScreenHeight) {
+        numberPadButtonSize = CONST.BUTTON_SIZE.MEDIUM;
+    } else {
+        numberPadButtonSize = CONST.BUTTON_SIZE.LARGE;
+    }
+
     return (
         <View
             style={[styles.flexColumn, styles.w100]}
@@ -80,13 +93,9 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                         return (
                             <Button
                                 key={column}
-                                small={isInLandscapeMode}
-                                medium={isExtraSmallScreenHeight && !isInLandscapeMode}
-                                large={!isExtraSmallScreenHeight && !isInLandscapeMode}
-                                shouldEnableHapticFeedback
+                                size={numberPadButtonSize}
+                                enableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
-                                text={column === '<' ? undefined : toLocaleDigit(column)}
-                                icon={column === '<' ? icons.BackArrow : undefined}
                                 onLongPress={() => handleLongPress(column)}
                                 onPress={() => numberPressed(column)}
                                 onPressIn={ControlSelection.block}
@@ -103,7 +112,9 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                                 }}
                                 isLongPressDisabled={isLongPressDisabled}
                                 testID={`button_${column}`}
-                            />
+                            >
+                                {column === '<' ? <Button.Icon src={icons.BackArrow} /> : <Button.Text>{toLocaleDigit(column)}</Button.Text>}
+                            </Button>
                         );
                     })}
                 </View>