diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx
index 6a08eace0fe1..fc192585fc53 100644
--- a/src/components/AccountSwitcher.tsx
+++ b/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>
                 )}
diff --git a/src/components/AddExistingExpenseFooter.tsx b/src/components/AddExistingExpenseFooter.tsx
index d4ff7530ebb2..10a7297f23d0 100644
--- a/src/components/AddExistingExpenseFooter.tsx
+++ b/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>
         </>
     );
 }
diff --git a/src/components/AgentPromotionalBanner.tsx b/src/components/AgentPromotionalBanner.tsx
index 2ae5763cc878..ed245074ae25 100644
--- a/src/components/AgentPromotionalBanner.tsx
+++ b/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]);
 
diff --git a/src/components/AnonymousReportFooter.tsx b/src/components/AnonymousReportFooter.tsx
index 5c94592e2185..2e728753722a 100644
--- a/src/components/AnonymousReportFooter.tsx
+++ b/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>
diff --git a/src/components/ApprovalWorkflowSection.tsx b/src/components/ApprovalWorkflowSection.tsx
index 858eb8efa254..b7e7e01886ec 100644
--- a/src/components/ApprovalWorkflowSection.tsx
+++ b/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>
diff --git a/src/components/AvatarPageFooter.tsx b/src/components/AvatarPageFooter.tsx
index dc9931785ea0..1fad12b392b3 100644
--- a/src/components/AvatarPageFooter.tsx
+++ b/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>
     );
 }
diff --git a/src/components/BankAccountVerificationView.tsx b/src/components/BankAccountVerificationView.tsx
index a3bd2ed18393..f1f9c1532701 100644
--- a/src/components/BankAccountVerificationView.tsx
+++ b/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:
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 1398577a6202..756ea38bb372 100644
--- a/src/components/Banner.tsx
+++ b/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')}>
diff --git a/src/components/BaseWidgetItem.tsx b/src/components/BaseWidgetItem.tsx
index c99d5384df82..c6157034ec43 100644
--- a/src/components/BaseWidgetItem.tsx
+++ b/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>
diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 25f053bf90e2..b3090bdba096 100644
--- a/src/components/BigNumberPad.tsx
+++ b/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>
diff --git a/src/components/BiometricsTestToolRow.tsx b/src/components/BiometricsTestToolRow.tsx
index 62be4fa0e5d3..dfe43b214994 100644
--- a/src/components/BiometricsTestToolRow.tsx
+++ b/src/components/BiometricsTestToolRow.tsx
@@ -12,7 +12,7 @@ import ROUTES from '@src/ROUTES';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import {useMultifactorAuthentication} from './MultifactorAuthentication/Context';
 import TestToolRow from './TestToolRow';
 
@@ -36,9 +36,8 @@ function BiometricsTestToolRow() {
         <TestToolRow title={biometricsTitle}>
             <View style={[styles.flexRow, styles.gap2]}>
                 <Button
-                    small
+                    size={CONST.BUTTON_SIZE.SMALL}
                     isDisabled={isOffline}
-                    text={translate('multifactorAuthentication.biometricsTest.test')}
                     onPress={() => {
                         // When launched from the hidden Test Tools modal (4-finger tap), dismiss that modal so the MFA
                         // overlay isn't hidden behind it on iOS. When rendered inline on the Troubleshoot page there is no
@@ -48,20 +47,23 @@ function BiometricsTestToolRow() {
                         }
                         executeScenario(CONST.MULTIFACTOR_AUTHENTICATION.SCENARIO.BIOMETRICS_TEST);
                     }}
-                />
+                >
+                    <Button.Text>{translate('multifactorAuthentication.biometricsTest.test')}</Button.Text>
+                </Button>
                 {isCurrentDeviceRegistered && !!localCredentialID && (
                     <Button
-                        danger
+                        variant={CONST.BUTTON_VARIANT.DANGER}
                         isDisabled={isOffline}
                         isLoading={isMFARevokeLoading}
-                        small
-                        text={translate('multifactorAuthentication.revoke.revoke')}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         onPress={async () => {
                             setIsMFARevokeLoading(true);
                             await revokeMultifactorAuthenticationCredentials({onlyKeyID: localCredentialID});
                             setIsMFARevokeLoading(false);
                         }}
-                    />
+                    >
+                        <Button.Text>{translate('multifactorAuthentication.revoke.revoke')}</Button.Text>
+                    </Button>
                 )}
             </View>
         </TestToolRow>
diff --git a/src/components/BookCallButton.tsx b/src/components/BookCallButton.tsx
index cabf167e1647..a5026e99224a 100644
--- a/src/components/BookCallButton.tsx
+++ b/src/components/BookCallButton.tsx
@@ -1,7 +1,6 @@
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 
 import {openExternalLink} from '@libs/actions/Link';
 import {callFunctionIfActionIsAllowed} from '@libs/actions/Session';
@@ -12,12 +11,8 @@ import type {PersonalDetailsList} from '@src/types/onyx';
 
 import type {StyleProp, ViewStyle} from 'react-native';
 
-import React from 'react';
-import {View} from 'react-native';
-
 import Avatar from './Avatar';
-import Button from './Button';
-import Text from './Text';
+import Button from './ButtonComposed';
 
 type BookCallButtonProps = {
     /** The calendar link to open when the button is pressed */
@@ -35,7 +30,6 @@ type BookCallButtonProps = {
 
 function BookCallButton({calendarLink, avatarAccountID, isNested = false, style}: BookCallButtonProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     const icons = useMemoizedLazyExpensifyIcons(['Phone']);
     const [avatarDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
         selector: (personalDetails: PersonalDetailsList | undefined) => (avatarAccountID ? personalDetails?.[avatarAccountID] : undefined),
@@ -52,32 +46,28 @@ function BookCallButton({calendarLink, avatarAccountID, isNested = false, style}
         sentryLabel: CONST.SENTRY_LABEL.ACCOUNT_MANAGER_BOOK_CALL.BUTTON,
         accessibilityLabel: label,
         isNested,
-        medium: true as const,
         style,
     };
 
     if (!avatarAccountID) {
         return (
-            <Button
-                text={label}
-                icon={icons.Phone}
-                {...commonProps}
-            />
+            <Button {...commonProps}>
+                <Button.Icon src={icons.Phone} />
+                <Button.Text>{label}</Button.Text>
+            </Button>
         );
     }
 
     return (
         <Button {...commonProps}>
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.gap2]}>
-                <Avatar
-                    source={avatarDetails?.avatar}
-                    avatarID={avatarAccountID}
-                    name={avatarDetails?.displayName ?? avatarDetails?.login}
-                    type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.XXX_SMALL}
-                />
-                <Text style={[styles.buttonText, styles.buttonMediumText]}>{label}</Text>
-            </View>
+            <Avatar
+                source={avatarDetails?.avatar}
+                avatarID={avatarAccountID}
+                name={avatarDetails?.displayName ?? avatarDetails?.login}
+                type={CONST.ICON_TYPE_AVATAR}
+                size={CONST.AVATAR_SIZE.XXX_SMALL}
+            />
+            <Button.Text>{label}</Button.Text>
         </Button>
     );
 }
diff --git a/src/components/BookTravelButton.tsx b/src/components/BookTravelButton.tsx
index 75f6e01ded7b..ec2b66fc6a83 100644
--- a/src/components/BookTravelButton.tsx
+++ b/src/components/BookTravelButton.tsx
@@ -31,7 +31,7 @@ import {emailSelector} from '@selectors/Session';
 import {Str} from 'expensify-common';
 import React, {useEffect, useRef, useState} from 'react';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import RenderHTML from './RenderHTML';
 
@@ -226,15 +226,16 @@ function BookTravelButton({
                 />
             )}
             <Button
-                text={text}
                 onPress={bookATrip}
                 accessibilityLabel={translate('travel.bookTravel')}
                 style={large ? styles.w100 : undefined}
                 isDisabled={!activePolicyID}
-                success
-                large={large}
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={large ? CONST.BUTTON_SIZE.LARGE : undefined}
                 sentryLabel={sentryLabel}
-            />
+            >
+                <Button.Text>{text}</Button.Text>
+            </Button>
             {shouldRenderErrorMessageBelowButton && !!errorMessage && (
                 <DotIndicatorMessage
                     style={[styles.mb1, styles.pt3]}
diff --git a/src/components/Button/ButtonDisabledWhenOffline.tsx b/src/components/Button/ButtonDisabledWhenOffline.tsx
index 7aa79b632e6d..5ec1cc636bb7 100644
--- a/src/components/Button/ButtonDisabledWhenOffline.tsx
+++ b/src/components/Button/ButtonDisabledWhenOffline.tsx
@@ -1,11 +1,10 @@
+import type {ButtonProps} from '@components/ButtonComposed';
+import Button from '@components/ButtonComposed';
+
 import useNetwork from '@hooks/useNetwork';
 
 import React from 'react';
 
-import type {ButtonProps} from '.';
-
-import Button from '.';
-
 type ButtonDisabledWhenOfflineProps = ButtonProps & {
     disabledWhenOffline?: boolean;
 };
diff --git a/src/components/ButtonComposed/primitives/ButtonIcon.tsx b/src/components/ButtonComposed/primitives/ButtonIcon.tsx
index e815d80552e4..eb99bf9cfded 100644
--- a/src/components/ButtonComposed/primitives/ButtonIcon.tsx
+++ b/src/components/ButtonComposed/primitives/ButtonIcon.tsx
@@ -23,9 +23,12 @@ type ButtonIconProps = {
 
     /** Default icon color when the button is not hovered. */
     fill?: string;
+
+    /** Accessibility label applied to this icon. When set, the icon is exposed to assistive tech with this label. */
+    accessibilityLabel?: string;
 };
 
-function ButtonIcon({src, style, hoverFill, fill}: ButtonIconProps) {
+function ButtonIcon({src, style, hoverFill, fill, accessibilityLabel}: ButtonIconProps) {
     const theme = useTheme();
     const {isHovered, variant, size} = useButtonContext();
 
@@ -43,6 +46,7 @@ function ButtonIcon({src, style, hoverFill, fill}: ButtonIconProps) {
                 fill={propsFill ?? defaultFill}
                 size={size}
                 isButtonIcon
+                accessibilityLabel={accessibilityLabel}
             />
         </View>
     );
diff --git a/src/components/ColumnsSettingsList.tsx b/src/components/ColumnsSettingsList.tsx
index 88b54acb0abd..934a38f50af9 100644
--- a/src/components/ColumnsSettingsList.tsx
+++ b/src/components/ColumnsSettingsList.tsx
@@ -6,13 +6,15 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import {getSearchColumnTranslationKey} from '@libs/SearchUIUtils';
 
+import CONST from '@src/CONST';
+
 import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
 
 import type {SearchCustomColumnIds} from './Search/types';
 import type {ListItem} from './SelectionList/types';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import DraggableList from './DraggableList';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import Icon from './Icon';
@@ -297,12 +299,13 @@ function ColumnsSettingsList({allColumns, defaultSelectedColumns, currentColumns
             </View>
             <View style={[styles.ph5, styles.pb5]}>
                 <Button
-                    large
-                    success
-                    pressOnEnter
-                    text={translate('common.save')}
+                    size={CONST.BUTTON_SIZE.LARGE}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     onPress={handleSave}
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('common.save')}</Button.Text>
+                </Button>
             </View>
         </ScreenWrapper>
     );
diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
index ab466ddcf33a..12112bae8c8e 100644
--- a/src/components/ConfirmContent.tsx
+++ b/src/components/ConfirmContent.tsx
@@ -5,6 +5,7 @@ import useNetwork from '@hooks/useNetwork';
 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';
@@ -17,7 +18,7 @@ import React from 'react';
 import {View} from 'react-native';
 
 import ActivityIndicator from './ActivityIndicator';
-import Button from './Button';
+import Button from './ButtonComposed';
 import Header from './Header';
 import Icon from './Icon';
 import ImageSVG from './ImageSVG';
@@ -175,6 +176,13 @@ function ConfirmContent({
 
     const isCentered = shouldCenterContent;
 
+    let confirmButtonVariant: ButtonVariant | undefined;
+    if (danger) {
+        confirmButtonVariant = CONST.BUTTON_VARIANT.DANGER;
+    } else if ((shouldUseSuccessStyleForConfirm || (shouldShowCancelButton && !danger)) && success) {
+        confirmButtonVariant = CONST.BUTTON_VARIANT.SUCCESS;
+    }
+
     const promptContent = typeof prompt === 'string' ? <Text style={[promptStyles, isCentered ? styles.textAlignCenter : {}]}>{prompt}</Text> : prompt;
     // Rendered outside the (optionally scrollable) prompt so it stays fixed above the prompt.
     let subtitleContent: ReactNode = subtitle;
@@ -244,30 +252,31 @@ function ConfirmContent({
                             <Button
                                 style={[styles.mt4, styles.noSelect]}
                                 onPress={onCancel}
-                                large
-                                text={cancelText || translate('common.no')}
-                            />
+                                size={CONST.BUTTON_SIZE.LARGE}
+                            >
+                                <Button.Text>{cancelText || translate('common.no')}</Button.Text>
+                            </Button>
                         )}
                         <Button
-                            success={shouldUseSuccessStyleForConfirm || (shouldShowCancelButton && !danger) ? success : false}
-                            danger={danger}
+                            variant={confirmButtonVariant}
                             style={shouldReverseStackedButtons ? styles.mt3 : styles.mt4}
                             onPress={onConfirm}
-                            pressOnEnter
-                            isPressOnEnterActive={isVisible}
-                            large
-                            text={confirmText || translate('common.yes')}
+                            size={CONST.BUTTON_SIZE.LARGE}
                             accessibilityLabel={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
                             isLoading={isConfirmLoading}
-                        />
+                        >
+                            <Button.KeyboardShortcut isPressOnEnterActive={isVisible} />
+                            <Button.Text>{confirmText || translate('common.yes')}</Button.Text>
+                        </Button>
                         {shouldShowCancelButton && !shouldReverseStackedButtons && (
                             <Button
                                 style={[styles.mt3, styles.noSelect]}
                                 onPress={onCancel}
-                                large
-                                text={cancelText || translate('common.no')}
-                            />
+                                size={CONST.BUTTON_SIZE.LARGE}
+                            >
+                                <Button.Text>{cancelText || translate('common.no')}</Button.Text>
+                            </Button>
                         )}
                     </>
                 ) : (
@@ -276,20 +285,20 @@ function ConfirmContent({
                             <Button
                                 style={[styles.noSelect, styles.flex1]}
                                 onPress={onCancel}
-                                text={cancelText || translate('common.no')}
-                            />
+                            >
+                                <Button.Text>{cancelText || translate('common.no')}</Button.Text>
+                            </Button>
                         )}
                         <Button
-                            success={shouldUseSuccessStyleForConfirm || (shouldShowCancelButton && !danger) ? success : false}
-                            danger={danger}
+                            variant={confirmButtonVariant}
                             style={[styles.flex1]}
                             onPress={onConfirm}
-                            pressOnEnter
-                            isPressOnEnterActive={isVisible}
-                            text={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
                             isLoading={isConfirmLoading}
-                        />
+                        >
+                            <Button.KeyboardShortcut isPressOnEnterActive={isVisible} />
+                            <Button.Text>{confirmText || translate('common.yes')}</Button.Text>
+                        </Button>
                     </View>
                 )}
             </View>
diff --git a/src/components/ConfirmationPage.tsx b/src/components/ConfirmationPage.tsx
index c8e77a6a58ae..36c3d8478809 100644
--- a/src/components/ConfirmationPage.tsx
+++ b/src/components/ConfirmationPage.tsx
@@ -4,6 +4,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Accessibility from '@libs/Accessibility';
 import isIllustrationLottieAnimation from '@libs/isIllustrationLottieAnimation';
 
+import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
@@ -13,7 +14,7 @@ import {StyleSheet, View} from 'react-native';
 
 import type DotLottieAnimation from './LottieAnimations/types';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import FixedFooter from './FixedFooter';
 import ImageSVG from './ImageSVG';
 import Lottie from './Lottie';
@@ -153,23 +154,25 @@ function ConfirmationPage({
                 <FixedFooter style={footerStyle}>
                     {shouldShowSecondaryButton && (
                         <Button
-                            large
-                            text={secondaryButtonText}
+                            size={CONST.BUTTON_SIZE.LARGE}
                             testID="confirmation-secondary-button"
                             style={styles.mt3}
                             onPress={onSecondaryButtonPress}
-                        />
+                        >
+                            <Button.Text>{secondaryButtonText}</Button.Text>
+                        </Button>
                     )}
                     {shouldShowButton && (
                         <Button
-                            success
-                            large
-                            text={buttonText}
+                            variant={CONST.BUTTON_VARIANT.SUCCESS}
+                            size={CONST.BUTTON_SIZE.LARGE}
                             testID="confirmation-primary-button"
                             style={styles.mt3}
-                            pressOnEnter
                             onPress={onButtonPress}
-                        />
+                        >
+                            <Button.KeyboardShortcut />
+                            <Button.Text>{buttonText}</Button.Text>
+                        </Button>
                     )}
                 </FixedFooter>
             )}
diff --git a/src/components/ConnectionStatusMessage.tsx b/src/components/ConnectionStatusMessage.tsx
index acd4d1e82e2e..b01f696282f1 100644
--- a/src/components/ConnectionStatusMessage.tsx
+++ b/src/components/ConnectionStatusMessage.tsx
@@ -3,12 +3,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import CONST from '@src/CONST';
+
 import type {ComponentProps} from 'react';
 
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import Icon from './Icon';
 import RenderHTML from './RenderHTML';
 
@@ -69,13 +71,14 @@ function ConnectionStatusMessage({
 
     const actionButton = shouldShowActionButton ? (
         <Button
-            small
-            danger
+            variant={CONST.BUTTON_VARIANT.DANGER}
+            size={CONST.BUTTON_SIZE.SMALL}
             style={styles.alignSelfStart}
-            text={actionText}
             onPress={onActionPress}
             isDisabled={isActionDisabled}
-        />
+        >
+            <Button.Text>{actionText}</Button.Text>
+        </Button>
     ) : null;
 
     return (
diff --git a/src/components/DecisionModal.tsx b/src/components/DecisionModal.tsx
index dc19968d01bb..4aa7123a6228 100644
--- a/src/components/DecisionModal.tsx
+++ b/src/components/DecisionModal.tsx
@@ -1,11 +1,13 @@
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import type {ButtonVariant} from '@styles/utils/types';
+
 import CONST from '@src/CONST';
 
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import Header from './Header';
 import Modal from './Modal';
 import RenderHTML from './RenderHTML';
@@ -77,6 +79,20 @@ function DecisionModal({
 }: DecisionModalProps) {
     const styles = useThemeStyles();
 
+    let firstOptionVariant: ButtonVariant | undefined;
+    if (isFirstOptionDanger) {
+        firstOptionVariant = CONST.BUTTON_VARIANT.DANGER;
+    } else if (isFirstOptionSuccess) {
+        firstOptionVariant = CONST.BUTTON_VARIANT.SUCCESS;
+    }
+
+    let secondOptionVariant: ButtonVariant | undefined;
+    if (isSecondOptionDanger) {
+        secondOptionVariant = CONST.BUTTON_VARIANT.DANGER;
+    } else if (isSecondOptionSuccess) {
+        secondOptionVariant = CONST.BUTTON_VARIANT.SUCCESS;
+    }
+
     return (
         <Modal
             onClose={onClose}
@@ -100,23 +116,23 @@ function DecisionModal({
                 </View>
                 {!!firstOptionText && (
                     <Button
-                        success={isFirstOptionSuccess}
-                        danger={isFirstOptionDanger}
+                        variant={firstOptionVariant}
                         style={styles.mt5}
                         onPress={onFirstOptionSubmit}
-                        pressOnEnter
-                        text={firstOptionText}
-                        large
-                    />
+                        size={CONST.BUTTON_SIZE.LARGE}
+                    >
+                        <Button.KeyboardShortcut />
+                        <Button.Text>{firstOptionText}</Button.Text>
+                    </Button>
                 )}
                 <Button
                     style={[firstOptionText ? styles.mt3 : styles.mt5, styles.noSelect]}
                     onPress={onSecondOptionSubmit}
-                    text={secondOptionText}
-                    success={isSecondOptionSuccess}
-                    danger={isSecondOptionDanger}
-                    large
-                />
+                    variant={secondOptionVariant}
+                    size={CONST.BUTTON_SIZE.LARGE}
+                >
+                    <Button.Text>{secondOptionText}</Button.Text>
+                </Button>
             </ScrollView>
         </Modal>
     );
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index 13d0dfee7152..8d0e8174c74e 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -20,7 +20,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 RenderHTML from './RenderHTML';
 import Text from './Text';
@@ -140,18 +140,20 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr
         const buttonsRow = (
             <View style={[styles.flexRow, styles.gap3]}>
                 <Button
-                    small
-                    text={translate('iou.error.saveReceipt')}
+                    size={CONST.BUTTON_SIZE.SMALL}
                     onPress={() => {
                         fileDownload(translate, receiptError.source, receiptError.filename);
                     }}
-                />
+                >
+                    <Button.Text>{translate('iou.error.saveReceipt')}</Button.Text>
+                </Button>
                 <Button
-                    small
-                    danger
-                    text={translate('iou.deleteExpense', {count: 1})}
+                    variant={CONST.BUTTON_VARIANT.DANGER}
+                    size={CONST.BUTTON_SIZE.SMALL}
                     onPress={dismissError}
-                />
+                >
+                    <Button.Text>{translate('iou.deleteExpense', {count: 1})}</Button.Text>
+                </Button>
             </View>
         );
         if (!isStackedLayout) {
diff --git a/src/components/ExportDownloadStatusModal.tsx b/src/components/ExportDownloadStatusModal.tsx
index 086291969a4a..bc1774d65edb 100644
--- a/src/components/ExportDownloadStatusModal.tsx
+++ b/src/components/ExportDownloadStatusModal.tsx
@@ -22,7 +22,7 @@ import React, {useEffect} from 'react';
 import {View} from 'react-native';
 
 import ActivityIndicator from './ActivityIndicator';
-import Button from './Button';
+import Button from './ButtonComposed';
 import Modal from './Modal';
 import RenderHTML from './RenderHTML';
 import Text from './Text';
@@ -120,10 +120,11 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
                     </View>
                     <Text style={styles.mb5}>{translate('exportDownload.preparingBody')}</Text>
                     <Button
-                        text={translate('exportDownload.sendFromConcierge')}
                         onPress={handleSendFromConcierge}
                         style={styles.w100}
-                    />
+                    >
+                        <Button.Text>{translate('exportDownload.sendFromConcierge')}</Button.Text>
+                    </Button>
                 </>
             );
         }
@@ -134,16 +135,18 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
                     <Text style={[styles.exportDownloadTitle, styles.mb2]}>{translate('exportDownload.conciergeTitle')}</Text>
                     <Text style={styles.mb5}>{translate('exportDownload.conciergeBody')}</Text>
                     <Button
-                        success
-                        text={translate('exportDownload.goToConcierge')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={handleGoToConcierge}
                         style={styles.w100}
-                    />
+                    >
+                        <Button.Text>{translate('exportDownload.goToConcierge')}</Button.Text>
+                    </Button>
                     <Button
-                        text={translate('exportDownload.dismiss')}
                         onPress={onClose}
                         style={[styles.w100, styles.mt3]}
-                    />
+                    >
+                        <Button.Text>{translate('exportDownload.dismiss')}</Button.Text>
+                    </Button>
                 </>
             );
         }
@@ -154,10 +157,11 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
                     <Text style={[styles.exportDownloadTitle, styles.mb2]}>{translate('exportDownload.noReceiptsTitle')}</Text>
                     <Text style={styles.mb5}>{translate('exportDownload.noReceiptsBody')}</Text>
                     <Button
-                        text={translate('exportDownload.close')}
                         onPress={onClose}
                         style={styles.w100}
-                    />
+                    >
+                        <Button.Text>{translate('exportDownload.close')}</Button.Text>
+                    </Button>
                 </>
             );
         }
@@ -194,11 +198,12 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
                     <Text style={[styles.exportDownloadTitle, styles.mb2]}>{translate('exportDownload.readyTitle')}</Text>
                     {renderPartialBody()}
                     <Button
-                        success
-                        text={translate('exportDownload.downloadFile')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={handleDownloadFile}
                         style={styles.w100}
-                    />
+                    >
+                        <Button.Text>{translate('exportDownload.downloadFile')}</Button.Text>
+                    </Button>
                 </>
             );
         }
@@ -219,10 +224,11 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E
                     <Text style={[styles.exportDownloadTitle, styles.mb2]}>{translate('exportDownload.failedTitle')}</Text>
                     {!!resolvedFailedBody && <Text style={styles.mb5}>{resolvedFailedBody}</Text>}
                     <Button
-                        text={translate('exportDownload.close')}
                         onPress={onClose}
                         style={styles.w100}
-                    />
+                    >
+                        <Button.Text>{translate('exportDownload.close')}</Button.Text>
+                    </Button>
                 </>
             );
         }
diff --git a/src/components/FeatureList.tsx b/src/components/FeatureList.tsx
index eb746f55b9d1..81f6276a9ffe 100644
--- a/src/components/FeatureList.tsx
+++ b/src/components/FeatureList.tsx
@@ -15,7 +15,7 @@ import {View} from 'react-native';
 
 import type DotLottieAnimation from './LottieAnimations/types';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import MenuItem from './MenuItem';
 import Section from './Section';
 
@@ -136,17 +136,18 @@ function FeatureList({
                 </View>
                 {!!ctaText && (
                     <Button
-                        text={ctaText}
                         onPress={onCtaPress}
                         accessibilityLabel={ctaAccessibilityLabel}
                         style={styles.w100}
                         innerStyles={buttonInnerStyles}
                         hoverStyles={buttonHoverStyles}
-                        success
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         isDisabled={isButtonDisabled}
-                        large
+                        size={CONST.BUTTON_SIZE.LARGE}
                         sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.FEATURE_LIST.CTA_BUTTON}
-                    />
+                    >
+                        <Button.Text>{ctaText}</Button.Text>
+                    </Button>
                 )}
                 {!!footer && footer}
             </View>
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index ba8c98b7a9e4..de4fa2b67e17 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -12,7 +12,7 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import FormAlertWrapper from './FormAlertWrapper';
 
 type FormAlertWithSubmitButtonProps = WithSentryLabel & {
@@ -153,35 +153,32 @@ function FormAlertWithSubmitButton({
                     {shouldRenderFooterAboveSubmit && footerContent}
                     {isOffline && !enabledWhenOffline ? (
                         <Button
-                            success
-                            shouldBlendOpacity={shouldBlendOpacity}
+                            variant={isSubmitActionDangerous ? CONST.BUTTON_VARIANT.DANGER : CONST.BUTTON_VARIANT.SUCCESS}
+                            blendOpacity={shouldBlendOpacity}
                             isDisabled
-                            text={buttonText}
+                            size={useSmallerSubmitButtonSize ? CONST.BUTTON_SIZE.MEDIUM : CONST.BUTTON_SIZE.LARGE}
                             style={style}
-                            danger={isSubmitActionDangerous}
-                            medium={useSmallerSubmitButtonSize}
-                            large={!useSmallerSubmitButtonSize}
                             onMouseDown={shouldPreventDefaultFocusOnPress ? (e) => e.preventDefault() : undefined}
                             sentryLabel={sentryLabel}
-                        />
+                        >
+                            <Button.Text>{buttonText}</Button.Text>
+                        </Button>
                     ) : (
                         <Button
                             ref={buttonRef}
-                            success
-                            shouldBlendOpacity={shouldBlendOpacity}
-                            pressOnEnter={pressOnEnter}
-                            enterKeyEventListenerPriority={enterKeyEventListenerPriority}
-                            text={buttonText}
+                            variant={isSubmitActionDangerous ? CONST.BUTTON_VARIANT.DANGER : CONST.BUTTON_VARIANT.SUCCESS}
+                            blendOpacity={shouldBlendOpacity}
+                            size={useSmallerSubmitButtonSize ? CONST.BUTTON_SIZE.MEDIUM : CONST.BUTTON_SIZE.LARGE}
                             style={style}
                             onPress={submit}
                             isDisabled={isDisabled}
                             isLoading={isLoading}
-                            danger={isSubmitActionDangerous}
-                            medium={useSmallerSubmitButtonSize}
-                            large={!useSmallerSubmitButtonSize}
                             onMouseDown={shouldPreventDefaultFocusOnPress ? (e) => e.preventDefault() : undefined}
                             sentryLabel={sentryLabel}
-                        />
+                        >
+                            {pressOnEnter && <Button.KeyboardShortcut enterKeyEventListenerPriority={enterKeyEventListenerPriority} />}
+                            <Button.Text>{buttonText}</Button.Text>
+                        </Button>
                     )}
                     {!shouldRenderFooterAboveSubmit && footerContent}
                 </View>
diff --git a/src/components/FrozenCardHeader.tsx b/src/components/FrozenCardHeader.tsx
index 3af6a6e83dca..b54a917c1444 100644
--- a/src/components/FrozenCardHeader.tsx
+++ b/src/components/FrozenCardHeader.tsx
@@ -21,7 +21,7 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import Text from './Text';
 import TextLink from './TextLink';
 
@@ -104,14 +104,14 @@ function FrozenCardHeader({cardPreview, children, style, onUnfreezePress, onAskT
             <View style={[styles.flexRow, styles.flexWrap, styles.alignItemsCenter, styles.justifyContentCenter, styles.gap2, styles.mt6, styles.alignSelfStretch]}>
                 <View style={equalButtonWrapperStyles}>
                     <Button
-                        medium
-                        text={translate(canUnfreezeCard ? 'cardPage.unfreezeCard' : 'cardPage.askToUnfreeze')}
-                        icon={icons.FreezeCard}
                         onPress={canUnfreezeCard ? onUnfreezePress : onAskToUnfreezePress}
                         isDisabled={canUnfreezeCard && isOffline}
                         innerStyles={equalButtonInnerStyles}
                         style={shouldUseEqualButtonWidths ? styles.w100 : styles.alignSelfStart}
-                    />
+                    >
+                        <Button.Icon src={icons.FreezeCard} />
+                        <Button.Text>{translate(canUnfreezeCard ? 'cardPage.unfreezeCard' : 'cardPage.askToUnfreeze')}</Button.Text>
+                    </Button>
                 </View>
                 {shouldUseEqualButtonWidths
                     ? actionButtons.map((button, index) => (
diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx
index c3dfcdb425dd..96c01ce13efc 100644
--- a/src/components/FullscreenLoadingIndicator.tsx
+++ b/src/components/FullscreenLoadingIndicator.tsx
@@ -12,7 +12,7 @@ import React, {useEffect, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 
 import ActivityIndicator from './ActivityIndicator';
-import Button from './Button';
+import Button from './ButtonComposed';
 import Text from './Text';
 
 type FullScreenLoadingIndicatorIconSize = ActivityIndicatorProps['size'];
@@ -69,10 +69,9 @@ function FullScreenLoadingIndicator({
                         <View style={styles.pv4}>
                             <Text>{translate('common.thisIsTakingLongerThanExpected')}</Text>
                         </View>
-                        <Button
-                            text={translate('common.goBack')}
-                            onPress={() => Navigation.goBack()}
-                        />
+                        <Button onPress={() => Navigation.goBack()}>
+                            <Button.Text>{translate('common.goBack')}</Button.Text>
+                        </Button>
                     </View>
                 )}
             </View>
diff --git a/src/components/GrowlNotification/GrowlNotificationContent.tsx b/src/components/GrowlNotification/GrowlNotificationContent.tsx
index 6e8ff02473f5..0c3d79223f25 100644
--- a/src/components/GrowlNotification/GrowlNotificationContent.tsx
+++ b/src/components/GrowlNotification/GrowlNotificationContent.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
 import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
@@ -155,8 +155,6 @@ function GrowlNotificationContent({bodyText, type, duration, action, nonce, onDi
                         </PressableWithoutFeedback>
                         {!!action && (
                             <Button
-                                medium
-                                text={action.label}
                                 accessibilityLabel={action.label}
                                 sentryLabel="GrowlNotification-Action"
                                 onPress={() => {
@@ -168,10 +166,10 @@ function GrowlNotificationContent({bodyText, type, duration, action, nonce, onDi
                                     action.onPress();
                                 }}
                                 innerStyles={styles.bgTransparent}
-                                textStyles={styles.growlNotificationActionText}
-                                shouldUseDefaultHover={false}
                                 hoverStyles={styles.growlNotificationActionHovered}
-                            />
+                            >
+                                <Button.Text style={styles.growlNotificationActionText}>{action.label}</Button.Text>
+                            </Button>
                         )}
                     </View>
                 </GestureDetector>
diff --git a/src/components/HRSyncResultsModal.tsx b/src/components/HRSyncResultsModal.tsx
index 0b35211aea87..9a74c22ecb90 100644
--- a/src/components/HRSyncResultsModal.tsx
+++ b/src/components/HRSyncResultsModal.tsx
@@ -15,7 +15,7 @@ import {View} from 'react-native';
 
 import type {ModalProps} from './Modal/Global/ModalContext';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import Icon from './Icon';
@@ -118,11 +118,12 @@ function HRSyncResultsModal({result, policyID, closeModal}: HRSyncResultsModalPr
                 </ScrollView>
                 <FixedFooter addBottomSafeAreaPadding>
                     <Button
-                        large
-                        success
-                        text={translate('common.buttonConfirm')}
+                        size={CONST.BUTTON_SIZE.LARGE}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={hideModal}
-                    />
+                    >
+                        <Button.Text>{translate('common.buttonConfirm')}</Button.Text>
+                    </Button>
                 </FixedFooter>
             </View>
         </Modal>
diff --git a/src/components/ImportSpreadsheet.tsx b/src/components/ImportSpreadsheet.tsx
index 089ea336771f..6ebf85634d41 100644
--- a/src/components/ImportSpreadsheet.tsx
+++ b/src/components/ImportSpreadsheet.tsx
@@ -23,7 +23,7 @@ import React, {useRef, useState} from 'react';
 import {PanResponder, PixelRatio, Platform, View} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import DragAndDropConsumer from './DragAndDrop/Consumer';
 import DragAndDropProvider from './DragAndDrop/Provider';
 import FilePicker from './FilePicker';
@@ -206,8 +206,7 @@ function ImportSpreadsheet({backTo, goTo, shouldForceReplaceNavigation = false,
             <FilePicker acceptableFileTypes={acceptableFileTypes}>
                 {({openPicker}) => (
                     <Button
-                        success
-                        text={translate('common.chooseFile')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         accessibilityLabel={translate('common.chooseFile')}
                         style={[styles.pt9]}
                         isLoading={isReadingFile}
@@ -218,7 +217,9 @@ function ImportSpreadsheet({backTo, goTo, shouldForceReplaceNavigation = false,
                                 },
                             });
                         }}
-                    />
+                    >
+                        <Button.Text>{translate('common.chooseFile')}</Button.Text>
+                    </Button>
                 )}
             </FilePicker>
         </>
diff --git a/src/components/ImportSpreadsheetColumns.tsx b/src/components/ImportSpreadsheetColumns.tsx
index 9237a335cd6d..527609ce11a7 100644
--- a/src/components/ImportSpreadsheetColumns.tsx
+++ b/src/components/ImportSpreadsheetColumns.tsx
@@ -5,6 +5,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import {setContainsHeader} from '@libs/actions/ImportSpreadsheet';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
@@ -13,7 +14,7 @@ import {View} from 'react-native';
 
 import type {ColumnRole} from './ImportColumn';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import FixedFooter from './FixedFooter';
 import ImportColumn from './ImportColumn';
 import OfflineWithFeedback from './OfflineWithFeedback';
@@ -125,14 +126,15 @@ function ImportSpreadsheetColumns({
                     errorRowStyles={styles.mv2}
                 >
                     <Button
-                        text={translate('common.import')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
+                        size={CONST.BUTTON_SIZE.LARGE}
                         onPress={importFunction}
                         isLoading={isButtonLoading}
                         isDisabled={shouldDisableButtonWhenOffline && isOffline}
-                        pressOnEnter
-                        success
-                        large
-                    />
+                    >
+                        <Button.KeyboardShortcut />
+                        <Button.Text>{translate('common.import')}</Button.Text>
+                    </Button>
                 </OfflineWithFeedback>
             </FixedFooter>
         </>
diff --git a/src/components/ImportedStateIndicator.tsx b/src/components/ImportedStateIndicator.tsx
index f7dd1ebe62f3..c760cf328734 100644
--- a/src/components/ImportedStateIndicator.tsx
+++ b/src/components/ImportedStateIndicator.tsx
@@ -4,12 +4,13 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import {clearOnyxAndResetApp} from '@libs/actions/App';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 
 function ImportedStateIndicator() {
     const styles = useThemeStyles();
@@ -23,14 +24,13 @@ function ImportedStateIndicator() {
     return (
         <View style={[styles.buttonDanger]}>
             <Button
-                danger
-                small
-                shouldRemoveLeftBorderRadius
-                shouldRemoveRightBorderRadius
-                text={translate('initialSettingsPage.troubleshoot.usingImportedState')}
+                variant={CONST.BUTTON_VARIANT.DANGER}
+                size={CONST.BUTTON_SIZE.SMALL}
+                removeBorderRadius={CONST.BUTTON_REMOVE_BORDER_RADIUS.ALL}
                 onPress={() => clearOnyxAndResetApp(true)}
-                textStyles={[styles.fontWeightNormal]}
-            />
+            >
+                <Button.Text style={[styles.fontWeightNormal]}>{translate('initialSettingsPage.troubleshoot.usingImportedState')}</Button.Text>
+            </Button>
         </View>
     );
 }
diff --git a/src/components/MoneyRequestHeaderPrimaryAction.tsx b/src/components/MoneyRequestHeaderPrimaryAction.tsx
index 5e9c11b2f95d..6fd53e3f00d9 100644
--- a/src/components/MoneyRequestHeaderPrimaryAction.tsx
+++ b/src/components/MoneyRequestHeaderPrimaryAction.tsx
@@ -34,7 +34,7 @@ import {personalDetailsLoginSelector} from '@selectors/PersonalDetails';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import {useDelegateNoAccessActions, useDelegateNoAccessState} from './DelegateNoAccessModalProvider';
 import {useWideRHPState} from './WideRHPContextProvider';
 
@@ -92,8 +92,7 @@ function MoneyRequestHeaderPrimaryAction({reportID}: MoneyRequestHeaderPrimaryAc
         if (primaryAction === CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS.REMOVE_HOLD) {
             return (
                 <Button
-                    success
-                    text={translate('iou.unhold')}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     onPress={() => {
                         if (isDelegateAccessRestricted) {
                             showDelegateNoAccessModal();
@@ -110,45 +109,48 @@ function MoneyRequestHeaderPrimaryAction({reportID}: MoneyRequestHeaderPrimaryAc
                             delegateAccountID,
                         );
                     }}
-                />
+                >
+                    <Button.Text>{translate('iou.unhold')}</Button.Text>
+                </Button>
             );
         }
 
         if (primaryAction === CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS.MARK_AS_RESOLVED) {
             return (
                 <Button
-                    success
-                    text={translate('iou.reject.markAsResolved')}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     onPress={() => {
                         if (!transaction?.transactionID) {
                             return;
                         }
                         markRejectViolationAsResolved(transaction.transactionID, isOffline, rawTransactionViolations, reportID);
                     }}
-                />
+                >
+                    <Button.Text>{translate('iou.reject.markAsResolved')}</Button.Text>
+                </Button>
             );
         }
 
         if (primaryAction === CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS.REVIEW_DUPLICATES) {
             return (
                 <Button
-                    success
-                    text={translate('iou.reviewDuplicates')}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     onPress={() => {
                         if (!reportID) {
                             return;
                         }
                         Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.TRANSACTION_DUPLICATE_REVIEW.getRoute(reportID)));
                     }}
-                />
+                >
+                    <Button.Text>{translate('iou.reviewDuplicates')}</Button.Text>
+                </Button>
             );
         }
 
         if (primaryAction === CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS.KEEP_THIS_ONE) {
             return (
                 <Button
-                    success
-                    text={translate('violations.keepThisOne')}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     onPress={() => {
                         if (!reportID) {
                             return;
@@ -173,19 +175,22 @@ function MoneyRequestHeaderPrimaryAction({reportID}: MoneyRequestHeaderPrimaryAc
                             ),
                         );
                     }}
-                />
+                >
+                    <Button.Text>{translate('violations.keepThisOne')}</Button.Text>
+                </Button>
             );
         }
 
         if (primaryAction === CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS.MARK_AS_CASH) {
             return (
                 <Button
-                    success
-                    text={translate('iou.markAsCash')}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
                     onPress={() => {
                         markAsCashAction(transaction?.transactionID, reportID, transactionViolations);
                     }}
-                />
+                >
+                    <Button.Text>{translate('iou.markAsCash')}</Button.Text>
+                </Button>
             );
         }
 
diff --git a/src/components/NumberWithSymbolForm.tsx b/src/components/NumberWithSymbolForm.tsx
index 3cb5f36a0bf8..a49678cc577f 100644
--- a/src/components/NumberWithSymbolForm.tsx
+++ b/src/components/NumberWithSymbolForm.tsx
@@ -34,7 +34,7 @@ import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
 import type {TextInputWithSymbolProps} from './TextInputWithSymbol/types';
 
 import BigNumberPad from './BigNumberPad';
-import Button from './Button';
+import Button from './ButtonComposed';
 import FormHelpMessage from './FormHelpMessage';
 import ScrollView from './ScrollView';
 import TextInput from './TextInput';
@@ -500,28 +500,34 @@ function NumberWithSymbolForm({
             <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
                 {shouldShowFlipButton && allowNegativeInput && canUseTouchScreen && (
                     <Button
-                        small
-                        icon={icons.PlusMinus}
-                        iconAccessibilityLabel={translate('iou.flip')}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         onPress={handleFlipPress}
                         onMouseDown={(e) => e.preventDefault()}
-                        iconWrapperStyles={styles.justifyContentCenter}
-                        text={translate('iou.flip')}
+                        contentContainerStyle={styles.justifyContentCenter}
                         accessibilityLabel={translate('iou.flip')}
                         isDisabled={disabled}
-                    />
+                    >
+                        <Button.Icon
+                            src={icons.PlusMinus}
+                            accessibilityLabel={translate('iou.flip')}
+                        />
+                        <Button.Text>{translate('iou.flip')}</Button.Text>
+                    </Button>
                 )}
                 {shouldShowCurrencyButton && !!currencyOrUnitButtonText && (
                     <Button
-                        small
-                        icon={icons.CoinsButton}
-                        iconAccessibilityLabel={translate('common.currency')}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         onPress={onTrailingDropdownPress}
-                        iconWrapperStyles={styles.justifyContentCenter}
-                        text={currencyOrUnitButtonText}
+                        contentContainerStyle={styles.justifyContentCenter}
                         accessibilityLabel={currencyButtonAccessibilityLabel ?? `${translate('common.selectCurrency')}, ${currencyOrUnitButtonText}`}
                         isDisabled={disabled}
-                    />
+                    >
+                        <Button.Icon
+                            src={icons.CoinsButton}
+                            accessibilityLabel={translate('common.currency')}
+                        />
+                        <Button.Text>{currencyOrUnitButtonText}</Button.Text>
+                    </Button>
                 )}
             </View>
         );
@@ -645,27 +651,33 @@ function NumberWithSymbolForm({
                         <View style={[styles.flexRow, styles.justifyContentCenter, styles.gap2]}>
                             {isSymbolPressable && (
                                 <Button
-                                    small
-                                    icon={icons.CoinsButton}
-                                    iconAccessibilityLabel={translate('common.currency')}
+                                    size={CONST.BUTTON_SIZE.SMALL}
                                     onPress={onSymbolButtonPress}
                                     style={styles.minWidth18}
-                                    iconWrapperStyles={styles.justifyContentCenter}
-                                    text={currency}
+                                    contentContainerStyle={styles.justifyContentCenter}
                                     accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
-                                />
+                                >
+                                    <Button.Icon
+                                        src={icons.CoinsButton}
+                                        accessibilityLabel={translate('common.currency')}
+                                    />
+                                    <Button.Text>{currency}</Button.Text>
+                                </Button>
                             )}
                             {allowFlippingAmount && (
                                 <Button
-                                    small
-                                    icon={icons.PlusMinus}
-                                    iconAccessibilityLabel={translate('iou.flip')}
+                                    size={CONST.BUTTON_SIZE.SMALL}
                                     onPress={toggleNegative}
                                     style={styles.minWidth18}
-                                    iconWrapperStyles={styles.justifyContentCenter}
-                                    text={translate('iou.flip')}
+                                    contentContainerStyle={styles.justifyContentCenter}
                                     accessibilityLabel={translate('iou.flip')}
-                                />
+                                >
+                                    <Button.Icon
+                                        src={icons.PlusMinus}
+                                        accessibilityLabel={translate('iou.flip')}
+                                    />
+                                    <Button.Text>{translate('iou.flip')}</Button.Text>
+                                </Button>
                             )}
                         </View>
                         {!!errorText && (
@@ -725,15 +737,18 @@ function NumberWithSymbolForm({
                         <View style={[styles.flexRow, styles.moneyRequestAmountContainer, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>
                         {isSymbolPressable && !!currency && !canUseTouchScreen && (
                             <Button
-                                small
-                                icon={icons.CoinsButton}
-                                iconAccessibilityLabel={translate('common.currency')}
+                                size={CONST.BUTTON_SIZE.SMALL}
                                 onPress={onSymbolButtonPress}
                                 style={styles.minWidth18}
-                                iconWrapperStyles={styles.justifyContentCenter}
-                                text={currency}
+                                contentContainerStyle={styles.justifyContentCenter}
                                 accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
-                            />
+                            >
+                                <Button.Icon
+                                    src={icons.CoinsButton}
+                                    accessibilityLabel={translate('common.currency')}
+                                />
+                                <Button.Text>{currency}</Button.Text>
+                            </Button>
                         )}
                         {!!errorText && (
                             <FormHelpMessage
@@ -751,27 +766,33 @@ function NumberWithSymbolForm({
             <View style={[styles.flexRow, styles.justifyContentCenter, shouldShowBigNumberPad ? styles.mb2 : styles.mb0, styles.gap2]}>
                 {isSymbolPressable && canUseTouchScreen && (
                     <Button
-                        small
-                        icon={icons.CoinsButton}
-                        iconAccessibilityLabel={translate('common.currency')}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         onPress={onSymbolButtonPress}
                         style={styles.minWidth18}
-                        iconWrapperStyles={styles.justifyContentCenter}
-                        text={currency}
+                        contentContainerStyle={styles.justifyContentCenter}
                         accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
-                    />
+                    >
+                        <Button.Icon
+                            src={icons.CoinsButton}
+                            accessibilityLabel={translate('common.currency')}
+                        />
+                        <Button.Text>{currency}</Button.Text>
+                    </Button>
                 )}
                 {allowFlippingAmount && canUseTouchScreen && (
                     <Button
-                        small
-                        icon={icons.PlusMinus}
-                        iconAccessibilityLabel={translate('iou.flip')}
+                        size={CONST.BUTTON_SIZE.SMALL}
                         onPress={toggleNegative}
                         style={styles.minWidth18}
-                        iconWrapperStyles={styles.justifyContentCenter}
-                        text={translate('iou.flip')}
+                        contentContainerStyle={styles.justifyContentCenter}
                         accessibilityLabel={translate('iou.flip')}
-                    />
+                    >
+                        <Button.Icon
+                            src={icons.PlusMinus}
+                            accessibilityLabel={translate('iou.flip')}
+                        />
+                        <Button.Text>{translate('iou.flip')}</Button.Text>
+                    </Button>
                 )}
             </View>
 
diff --git a/src/components/OnboardingMergingAccountBlockedView.tsx b/src/components/OnboardingMergingAccountBlockedView.tsx
index 6715b797d7b3..fa6f6c76a273 100644
--- a/src/components/OnboardingMergingAccountBlockedView.tsx
+++ b/src/components/OnboardingMergingAccountBlockedView.tsx
@@ -9,13 +9,14 @@ import variables from '@styles/variables';
 
 import {setOnboardingErrorMessage} from '@userActions/Welcome';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 import React from 'react';
 
 import BlockingView from './BlockingViews/BlockingView';
-import Button from './Button';
+import Button from './ButtonComposed';
 
 type OnboardingMergingAccountBlockedViewProps = {
     // Work email to display in the subtitle
@@ -50,10 +51,9 @@ function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergi
                 subtitleStyle={[styles.colorMuted]}
             />
             <Button
-                success
-                large
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
+                size={CONST.BUTTON_SIZE.LARGE}
                 style={[styles.mb5]}
-                text={translate('common.buttonConfirm')}
                 onPress={() => {
                     setOnboardingErrorMessage(null);
                     if (isVsb) {
@@ -62,7 +62,9 @@ function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergi
                     }
                     Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute());
                 }}
-            />
+            >
+                <Button.Text>{translate('common.buttonConfirm')}</Button.Text>
+            </Button>
         </>
     );
 }
diff --git a/src/components/PDFDownloadModal.tsx b/src/components/PDFDownloadModal.tsx
index ad04a2c55a94..6a01390f1f1e 100644
--- a/src/components/PDFDownloadModal.tsx
+++ b/src/components/PDFDownloadModal.tsx
@@ -10,7 +10,7 @@ import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 
 import ActivityIndicator from './ActivityIndicator';
-import Button from './Button';
+import Button from './ButtonComposed';
 import Header from './Header';
 import Icon from './Icon';
 import Modal from './Modal';
@@ -115,7 +115,7 @@ function PDFDownloadModal({
                     </View>
                     <Button
                         style={[styles.mt3, styles.noSelect]}
-                        success={shouldUseSuccessButton && hasFinishedPDFDownload}
+                        variant={shouldUseSuccessButton && hasFinishedPDFDownload ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
                         onPress={() => {
                             if (!hasFinishedPDFDownload) {
                                 onClose();
@@ -127,8 +127,9 @@ function PDFDownloadModal({
                                 onClose();
                             }
                         }}
-                        text={hasFinishedPDFDownload ? translate('common.download') : translate('common.cancel')}
-                    />
+                    >
+                        <Button.Text>{hasFinishedPDFDownload ? translate('common.download') : translate('common.cancel')}</Button.Text>
+                    </Button>
                 </View>
                 <PressableWithFeedback
                     onPress={onClose}
diff --git a/src/components/ProactiveAppReviewModal.tsx b/src/components/ProactiveAppReviewModal.tsx
index 52febc1f9b29..b47cae764247 100644
--- a/src/components/ProactiveAppReviewModal.tsx
+++ b/src/components/ProactiveAppReviewModal.tsx
@@ -8,7 +8,7 @@ import CONST from '@src/CONST';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import ImageSVG from './ImageSVG';
 import Modal from './Modal';
 import Text from './Text';
@@ -60,19 +60,21 @@ function ProactiveAppReviewModal({isVisible, onPositive, onNegative, onSkip}: Pr
 
                 {/* Buttons */}
                 <Button
-                    success
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     style={[styles.mt5]}
                     onPress={onPositive}
-                    pressOnEnter
-                    text={translate('proactiveAppReview.positiveButton')}
-                    large
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('proactiveAppReview.positiveButton')}</Button.Text>
+                </Button>
                 <Button
+                    size={CONST.BUTTON_SIZE.LARGE}
                     style={[styles.mt3, styles.noSelect]}
                     onPress={onNegative}
-                    text={translate('proactiveAppReview.negativeButton')}
-                    large
-                />
+                >
+                    <Button.Text>{translate('proactiveAppReview.negativeButton')}</Button.Text>
+                </Button>
             </View>
         </Modal>
     );
diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx
index 6338efeeca6c..8c8a852348c4 100644
--- a/src/components/PromotedActionsBar.tsx
+++ b/src/components/PromotedActionsBar.tsx
@@ -24,7 +24,7 @@ import {View} from 'react-native';
 
 import type {ThreeDotsMenuItem} from './HeaderWithBackButton/types';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 
 type PromotedAction = {
     key: string;
@@ -144,12 +144,13 @@ function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBa
                     style={[styles.flex1, styles.mw50]}
                     key={key}
                 >
-                    <Button
-                        onPress={onSelected}
-                        iconFill={theme.icon}
-                        text={translate(translationKey)}
-                        icon={typeof icon === 'string' ? icons[icon] : icon}
-                    />
+                    <Button onPress={onSelected}>
+                        <Button.Icon
+                            src={typeof icon === 'string' ? icons[icon] : icon}
+                            fill={theme.icon}
+                        />
+                        <Button.Text>{translate(translationKey)}</Button.Text>
+                    </Button>
                 </View>
             ))}
         </View>
diff --git a/src/components/RequireTwoFactorAuthenticationModal.tsx b/src/components/RequireTwoFactorAuthenticationModal.tsx
index a64391856e06..d1d512209f59 100644
--- a/src/components/RequireTwoFactorAuthenticationModal.tsx
+++ b/src/components/RequireTwoFactorAuthenticationModal.tsx
@@ -11,7 +11,7 @@ import CONST from '@src/CONST';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import ImageSVG from './ImageSVG';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
@@ -79,12 +79,13 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description,
                         <Text style={styles.textSupporting}>{description}</Text>
                     </View>
                     <Button
-                        large
-                        success
-                        pressOnEnter
+                        size={CONST.BUTTON_SIZE.LARGE}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={onSubmit}
-                        text={translate('twoFactorAuth.enableTwoFactorAuth')}
-                    />
+                    >
+                        <Button.KeyboardShortcut />
+                        <Button.Text>{translate('twoFactorAuth.enableTwoFactorAuth')}</Button.Text>
+                    </Button>
                 </View>
             </View>
         </Modal>
diff --git a/src/components/SubscriptionPlanDowngradeBlocked.tsx b/src/components/SubscriptionPlanDowngradeBlocked.tsx
index f257db7dc109..87424b5f1ed7 100644
--- a/src/components/SubscriptionPlanDowngradeBlocked.tsx
+++ b/src/components/SubscriptionPlanDowngradeBlocked.tsx
@@ -3,6 +3,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import {isSubscriptionTypeOfInvoicing} from '@libs/SubscriptionUtils';
 
+import CONST from '@src/CONST';
 import type {PrivateSubscription} from '@src/types/onyx';
 
 import type {OnyxEntry} from 'react-native-onyx';
@@ -10,7 +11,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import FixedFooter from './FixedFooter';
 import Text from './Text';
 
@@ -38,11 +39,12 @@ function SubscriptionPlanDowngradeBlocked({privateSubscription, formattedSubscri
             )}
             <FixedFooter style={[styles.mtAuto]}>
                 <Button
-                    success
-                    large
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     onPress={onClosePress}
-                    text={translate('common.close')}
-                />
+                >
+                    <Button.Text>{translate('common.close')}</Button.Text>
+                </Button>
             </FixedFooter>
         </View>
     );
diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
index 79d0dcf785d1..0d06c5b27a4e 100644
--- a/src/components/TaskHeaderActionButton.tsx
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -21,7 +21,7 @@ import {delegateEmailSelector} from '@selectors/Account';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 
 type TaskHeaderActionButtonProps = {
     /** The report currently being looked at */
@@ -46,9 +46,8 @@ function TaskHeaderActionButton({report}: TaskHeaderActionButtonProps) {
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
             <Button
-                success
+                variant={CONST.BUTTON_VARIANT.SUCCESS}
                 isDisabled={!isTaskActionable}
-                text={translate(isCompletedTaskReport(report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
                 onPress={callFunctionIfActionIsAllowed(() => {
                     // If we're already navigating to these task editing pages, early return not to mark as completed, otherwise we would have not found page.
                     if (isActiveTaskEditRoute(report.reportID)) {
@@ -62,7 +61,9 @@ function TaskHeaderActionButton({report}: TaskHeaderActionButtonProps) {
                 })}
                 style={styles.flex1}
                 sentryLabel={CONST.SENTRY_LABEL.TASK.HEADER_ACTION_BUTTON}
-            />
+            >
+                <Button.Text>{translate(isCompletedTaskReport(report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}</Button.Text>
+            </Button>
         </View>
     );
 }
diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 0d3b5f31beff..7152b6f0ee5a 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -12,13 +12,14 @@ import {expireSessionWithDelay, invalidateAuthToken, invalidateCredentials} from
 import {setIsDebugModeEnabled, setShouldShowBranchNameInTitle, setShouldUseStagingServer} from '@userActions/User';
 
 import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 import React from 'react';
 import {Platform} from 'react-native';
 
 import BiometricsTestToolRow from './BiometricsTestToolRow';
-import Button from './Button';
+import Button from './ButtonComposed';
 import SoftKillTestToolRow from './SoftKillTestToolRow';
 import Switch from './Switch';
 import TestCrash from './TestCrash';
@@ -77,37 +78,41 @@ function TestToolMenu() {
                     {/* Instantly invalidates a user's local authToken. Useful for testing flows related to reauthentication. */}
                     <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
                         <Button
-                            small
-                            text={translate('initialSettingsPage.troubleshoot.invalidate')}
+                            size={CONST.BUTTON_SIZE.SMALL}
                             onPress={() => invalidateAuthToken()}
-                        />
+                        >
+                            <Button.Text>{translate('initialSettingsPage.troubleshoot.invalidate')}</Button.Text>
+                        </Button>
                     </TestToolRow>
 
                     {/* Clears stored auto-generated credentials, corrupts the local authToken and fires a request so reauth fails and the user is signed out. Useful for manually testing sign out logic. */}
                     <TestToolRow title={translate('initialSettingsPage.troubleshoot.deviceCredentials')}>
                         <Button
-                            small
-                            text={translate('initialSettingsPage.troubleshoot.destroy')}
+                            size={CONST.BUTTON_SIZE.SMALL}
                             onPress={() => invalidateCredentials()}
-                        />
+                        >
+                            <Button.Text>{translate('initialSettingsPage.troubleshoot.destroy')}</Button.Text>
+                        </Button>
                     </TestToolRow>
 
                     {/* Sends an expired session to the FE and invalidates the session by the same time in the BE. Action is delayed for 15s */}
                     <TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
                         <Button
-                            small
-                            text={translate('initialSettingsPage.troubleshoot.invalidateWithDelay')}
+                            size={CONST.BUTTON_SIZE.SMALL}
                             onPress={() => expireSessionWithDelay()}
-                        />
+                        >
+                            <Button.Text>{translate('initialSettingsPage.troubleshoot.invalidateWithDelay')}</Button.Text>
+                        </Button>
                     </TestToolRow>
 
                     {/* Clears the useSidebarOrderedReports cache to re-compute from latest onyx values */}
                     <TestToolRow title={translate('initialSettingsPage.troubleshoot.leftHandNavCache')}>
                         <Button
-                            small
-                            text={translate('initialSettingsPage.troubleshoot.clearleftHandNavCache')}
+                            size={CONST.BUTTON_SIZE.SMALL}
                             onPress={clearLHNCache}
-                        />
+                        >
+                            <Button.Text>{translate('initialSettingsPage.troubleshoot.clearleftHandNavCache')}</Button.Text>
+                        </Button>
                     </TestToolRow>
 
                     {/* Allows testing and revoking biometric multifactor authentication */}
diff --git a/src/components/TrialPaymentReminderModal.tsx b/src/components/TrialPaymentReminderModal.tsx
index 3e6d5bceb06d..6bc935035088 100644
--- a/src/components/TrialPaymentReminderModal.tsx
+++ b/src/components/TrialPaymentReminderModal.tsx
@@ -9,7 +9,7 @@ import CONST from '@src/CONST';
 import React from 'react';
 import {View} from 'react-native';
 
-import Button from './Button';
+import Button from './ButtonComposed';
 import ImageSVG from './ImageSVG';
 import Modal from './Modal';
 import Text from './Text';
@@ -78,19 +78,21 @@ function TrialPaymentReminderModal({isVisible, variant, daysRemaining, countdown
                 <Text style={[styles.textSupporting]}>{translate('trialPaymentReminder.subtitle')}</Text>
 
                 <Button
-                    success
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     style={[styles.mt5]}
                     onPress={onAddPaymentCard}
-                    pressOnEnter
-                    text={translate('trialPaymentReminder.addPaymentCardButton')}
-                    large
-                />
+                >
+                    <Button.KeyboardShortcut />
+                    <Button.Text>{translate('trialPaymentReminder.addPaymentCardButton')}</Button.Text>
+                </Button>
                 <Button
+                    size={CONST.BUTTON_SIZE.LARGE}
                     style={[styles.mt3]}
                     onPress={onClose}
-                    text={translate('trialPaymentReminder.closeButton')}
-                    large
-                />
+                >
+                    <Button.Text>{translate('trialPaymentReminder.closeButton')}</Button.Text>
+                </Button>
             </View>
         </Modal>
     );
diff --git a/src/components/UploadFile.tsx b/src/components/UploadFile.tsx
index a908810a773e..7f833d4c309e 100644
--- a/src/components/UploadFile.tsx
+++ b/src/components/UploadFile.tsx
@@ -15,7 +15,7 @@ import React from 'react';
 import {View} from 'react-native';
 
 import AttachmentPicker from './AttachmentPicker';
-import Button from './Button';
+import Button from './ButtonComposed';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
 import {PressableWithFeedback} from './Pressable';
@@ -129,15 +129,15 @@ function UploadFile({
             >
                 {({openPicker}) => (
                     <Button
-                        medium
-                        text={buttonText}
                         accessibilityLabel={buttonText}
                         onPress={() => {
                             openPicker({
                                 onPicked: handleFileUpload,
                             });
                         }}
-                    />
+                    >
+                        <Button.Text>{buttonText}</Button.Text>
+                    </Button>
                 )}
             </AttachmentPicker>
             {uploadedFiles.map((file) => (
diff --git a/src/pages/home/ForYouSection/index.tsx b/src/pages/home/ForYouSection/index.tsx
index d5c79257a972..cf5d38c51cbe 100644
--- a/src/pages/home/ForYouSection/index.tsx
+++ b/src/pages/home/ForYouSection/index.tsx
@@ -103,7 +103,7 @@ function ForYouSection() {
                     iconFill: colors.tangerine500,
                     translationKey: 'homePage.forYouSection.reviewExpenses' as const,
                     handler: reviewExpenses,
-                    buttonProps: {danger: true} as const,
+                    buttonVariant: CONST.BUTTON_VARIANT.DANGER,
                 },
                 {
                     key: 'submit',
@@ -162,7 +162,7 @@ function ForYouSection() {
 
     const renderTodoItems = () => (
         <View style={styles.getForYouSectionContainerStyle(shouldUseNarrowLayout)}>
-            {todoItems.map(({key, count, icon, iconBackgroundColor, iconFill, translationKey, handler, buttonProps}) => (
+            {todoItems.map(({key, count, icon, iconBackgroundColor, iconFill, translationKey, handler, buttonVariant}) => (
                 <BaseWidgetItem
                     key={key}
                     icon={icon}
@@ -171,7 +171,7 @@ function ForYouSection() {
                     title={translate(translationKey, {count})}
                     ctaText={translate('homePage.forYouSection.begin')}
                     onCtaPress={handler}
-                    buttonProps={buttonProps ?? {success: true}}
+                    buttonVariant={buttonVariant ?? CONST.BUTTON_VARIANT.SUCCESS}
                 />
             ))}
         </View>
diff --git a/src/pages/home/TimeSensitiveSection/items/ActivateCard.tsx b/src/pages/home/TimeSensitiveSection/items/ActivateCard.tsx
index f2dd8bd13e68..46c7375a0e94 100644
--- a/src/pages/home/TimeSensitiveSection/items/ActivateCard.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/ActivateCard.tsx
@@ -7,6 +7,7 @@ import useTheme from '@hooks/useTheme';
 
 import Navigation from '@libs/Navigation/Navigation';
 
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Card} from '@src/types/onyx';
 
@@ -29,7 +30,7 @@ function ActivateCard({card}: ActivateCardProps) {
             subtitle={translate('homePage.timeSensitiveSection.activateCard.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.activateCard.cta')}
             onCtaPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(String(card.cardID)))}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx b/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx
index 0db3dc0226bf..28f6557d550f 100644
--- a/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/AddBankAccount.tsx
@@ -11,6 +11,7 @@ import {openPersonalBankAccountSetupView} from '@libs/actions/BankAccounts';
 
 import colors from '@styles/theme/colors';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 import {isUserValidatedSelector} from '@selectors/Account';
@@ -30,7 +31,7 @@ function AddBankAccount() {
             subtitle={translate('common.wallet')}
             ctaText={translate('common.add')}
             onCtaPress={() => openPersonalBankAccountSetupView({isUserValidated})}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/AddPaymentCard/index.tsx b/src/pages/home/TimeSensitiveSection/items/AddPaymentCard/index.tsx
index c937a11cb9de..d286f2e2e2a3 100644
--- a/src/pages/home/TimeSensitiveSection/items/AddPaymentCard/index.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/AddPaymentCard/index.tsx
@@ -6,6 +6,8 @@ import useTheme from '@hooks/useTheme';
 
 import navigateToSubscriptionPayment from '@pages/home/common/navigateToSubscriptionPayment';
 
+import CONST from '@src/CONST';
+
 import React from 'react';
 
 function AddPaymentCard() {
@@ -22,7 +24,7 @@ function AddPaymentCard() {
             subtitle={translate('homePage.timeSensitiveSection.addPaymentCard.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.addPaymentCard.cta')}
             onCtaPress={navigateToSubscriptionPayment}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/AddShippingAddress.tsx b/src/pages/home/TimeSensitiveSection/items/AddShippingAddress.tsx
index bbd8df424739..d65b6cbdea3e 100644
--- a/src/pages/home/TimeSensitiveSection/items/AddShippingAddress.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/AddShippingAddress.tsx
@@ -7,6 +7,7 @@ import useTheme from '@hooks/useTheme';
 
 import Navigation from '@libs/Navigation/Navigation';
 
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Card} from '@src/types/onyx';
 
@@ -29,7 +30,7 @@ function AddShippingAddress({card}: AddShippingAddressProps) {
             subtitle={translate('homePage.timeSensitiveSection.addShippingAddress.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.addShippingAddress.cta')}
             onCtaPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAIN_CARD.getRoute(String(card.cardID)))}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/AddVirtualCardPersonalDetails.tsx b/src/pages/home/TimeSensitiveSection/items/AddVirtualCardPersonalDetails.tsx
index 60b4ed6c744c..7386d73ef761 100644
--- a/src/pages/home/TimeSensitiveSection/items/AddVirtualCardPersonalDetails.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/AddVirtualCardPersonalDetails.tsx
@@ -8,6 +8,7 @@ import useTheme from '@hooks/useTheme';
 import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
 
+import CONST from '@src/CONST';
 import {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type {Card} from '@src/types/onyx';
 
@@ -30,7 +31,7 @@ function AddVirtualCardPersonalDetails({card}: AddVirtualCardPersonalDetailsProp
             subtitle={translate('homePage.timeSensitiveSection.addVirtualCardPersonalDetails.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.addVirtualCardPersonalDetails.cta')}
             onCtaPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.MISSING_PERSONAL_DETAILS.getRoute(String(card.cardID))))}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/EnterSignerInfo.tsx b/src/pages/home/TimeSensitiveSection/items/EnterSignerInfo.tsx
index 90d3cfa25d5f..28a49c92e27c 100644
--- a/src/pages/home/TimeSensitiveSection/items/EnterSignerInfo.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/EnterSignerInfo.tsx
@@ -7,6 +7,7 @@ import Navigation from '@libs/Navigation/Navigation';
 
 import colors from '@styles/theme/colors';
 
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
 import React from 'react';
@@ -39,7 +40,7 @@ function EnterSignerInfo({policyID, bankAccountID, bankAccountLastFour}: EnterSi
             subtitle={translate('homePage.timeSensitiveSection.enterSignerInfo.subtitle', {bankAccountLastFour})}
             ctaText={translate('homePage.forYouSection.begin')}
             onCtaPress={handleCtaPress}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx
index 4b4cda187a3e..281160bad0dc 100644
--- a/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/FixCompanyCardConnection.tsx
@@ -113,7 +113,7 @@ function FixCompanyCardConnection({card, policyID, policyName}: FixCompanyCardCo
                 }
                 Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
             }}
-            buttonProps={{danger: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.DANGER}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/FixFailedBilling.tsx b/src/pages/home/TimeSensitiveSection/items/FixFailedBilling.tsx
index 4d9bd24e84d2..00695bb38b09 100644
--- a/src/pages/home/TimeSensitiveSection/items/FixFailedBilling.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/FixFailedBilling.tsx
@@ -7,6 +7,8 @@ import navigateToSubscriptionPayment from '@pages/home/common/navigateToSubscrip
 
 import colors from '@styles/theme/colors';
 
+import CONST from '@src/CONST';
+
 import React from 'react';
 
 function FixFailedBilling() {
@@ -22,7 +24,7 @@ function FixFailedBilling() {
             subtitle={translate('homePage.timeSensitiveSection.fixFailedBilling.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.ctaFix')}
             onCtaPress={navigateToSubscriptionPayment}
-            buttonProps={{danger: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.DANGER}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/FixPersonalCardConnection.tsx b/src/pages/home/TimeSensitiveSection/items/FixPersonalCardConnection.tsx
index a16a7c809615..d6e3380efb1c 100644
--- a/src/pages/home/TimeSensitiveSection/items/FixPersonalCardConnection.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/FixPersonalCardConnection.tsx
@@ -7,6 +7,7 @@ import Navigation from '@libs/Navigation/Navigation';
 
 import colors from '@styles/theme/colors';
 
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Card} from '@src/types/onyx';
 
@@ -30,7 +31,7 @@ function FixPersonalCardConnection({card}: FixPersonalCardConnectionProps) {
             subtitle={translate('homePage.timeSensitiveSection.fixPersonalCardConnection.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.ctaFix')}
             onCtaPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_PERSONAL_CARD_DETAILS.getRoute(String(card.cardID)))}
-            buttonProps={{danger: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.DANGER}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/FixPolicyConnection.tsx b/src/pages/home/TimeSensitiveSection/items/FixPolicyConnection.tsx
index 758a2af4c0b0..4fc9a9e269f1 100644
--- a/src/pages/home/TimeSensitiveSection/items/FixPolicyConnection.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/FixPolicyConnection.tsx
@@ -47,7 +47,7 @@ function FixPolicyConnection({connectionName, policyID, policyName, integrationN
             subtitle={subtitle}
             ctaText={translate('homePage.timeSensitiveSection.ctaFix')}
             onCtaPress={() => Navigation.navigate(fixRoute)}
-            buttonProps={{danger: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.DANGER}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/ReviewCardFraud.tsx b/src/pages/home/TimeSensitiveSection/items/ReviewCardFraud.tsx
index 5813a23be4bd..0425be510099 100644
--- a/src/pages/home/TimeSensitiveSection/items/ReviewCardFraud.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/ReviewCardFraud.tsx
@@ -59,7 +59,7 @@ function ReviewCardFraud({possibleFraud}: ReviewCardFraudProps) {
             subtitle={translate('homePage.timeSensitiveSection.reviewCardFraud.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.reviewCardFraud.cta')}
             onCtaPress={handleReviewPress}
-            buttonProps={{danger: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.DANGER}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/UnlockBankAccount.tsx b/src/pages/home/TimeSensitiveSection/items/UnlockBankAccount.tsx
index 1f57963a01a2..4856ec92c0bc 100644
--- a/src/pages/home/TimeSensitiveSection/items/UnlockBankAccount.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/UnlockBankAccount.tsx
@@ -11,6 +11,7 @@ import {navigateToConciergeChat} from '@libs/actions/Report';
 
 import colors from '@styles/theme/colors';
 
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 import {hasSeenTourSelector} from '@selectors/Onboarding';
@@ -54,7 +55,7 @@ function UnlockBankAccount({bankAccountID, policyName}: UnlockBankAccountProps)
             subtitle={subtitle}
             ctaText={translate('homePage.timeSensitiveSection.ctaFix')}
             onCtaPress={handleCtaPress}
-            buttonProps={{danger: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.DANGER}
         />
     );
 }
diff --git a/src/pages/home/TimeSensitiveSection/items/ValidateAccount.tsx b/src/pages/home/TimeSensitiveSection/items/ValidateAccount.tsx
index a72a40a158be..167ca7f06a33 100644
--- a/src/pages/home/TimeSensitiveSection/items/ValidateAccount.tsx
+++ b/src/pages/home/TimeSensitiveSection/items/ValidateAccount.tsx
@@ -8,6 +8,7 @@ import Navigation from '@libs/Navigation/Navigation';
 
 import colors from '@styles/theme/colors';
 
+import CONST from '@src/CONST';
 import {DYNAMIC_ROUTES} from '@src/ROUTES';
 
 import React from 'react';
@@ -25,7 +26,7 @@ function ValidateAccount() {
             subtitle={translate('homePage.timeSensitiveSection.validateAccount.subtitle')}
             ctaText={translate('homePage.timeSensitiveSection.validateAccount.cta')}
             onCtaPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path))}
-            buttonProps={{success: true}}
+            buttonVariant={CONST.BUTTON_VARIANT.SUCCESS}
         />
     );
 }
diff --git a/src/pages/settings/Wallet/PaymentMethodListItem.tsx b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
index c747de3bcc4b..e639aa52b928 100644
--- a/src/pages/settings/Wallet/PaymentMethodListItem.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
@@ -1,5 +1,5 @@
 import Badge from '@components/Badge';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ConnectionStatusBadge from '@components/ConnectionStatusBadge';
 import ConnectionStatusMessage from '@components/ConnectionStatusMessage';
 import Hoverable from '@components/Hoverable';
@@ -329,11 +329,12 @@ function PaymentMethodListItem({item, shouldShowDefaultBadge, threeDotsMenuItems
                         <Text style={[styles.mutedNormalTextLabel, styles.label, styles.flexShrink1]}>{translate('walletPage.addVirtualCardPersonalDetails.subtitle')}</Text>
                     </View>
                     <Button
-                        small
-                        success
-                        text={translate('walletPage.addVirtualCardPersonalDetails.cta')}
+                        size={CONST.BUTTON_SIZE.SMALL}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.MISSING_PERSONAL_DETAILS.getRoute(String(item.cardID))))}
-                    />
+                    >
+                        <Button.Text>{translate('walletPage.addVirtualCardPersonalDetails.cta')}</Button.Text>
+                    </Button>
                 </View>
             )}
             {isChaseAccountConnectedViaPlaid && (
diff --git a/src/pages/signin/ChooseSSOOrValidateCode.tsx b/src/pages/signin/ChooseSSOOrValidateCode.tsx
index 09f28c29ccaf..330c739cd972 100644
--- a/src/pages/signin/ChooseSSOOrValidateCode.tsx
+++ b/src/pages/signin/ChooseSSOOrValidateCode.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 
@@ -54,16 +54,17 @@ function ChooseSSOOrValidateCode({setIsUsingValidateCode}: ChooseSSOOrValidateCo
                 <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
                 <Button
                     isDisabled={isOffline}
-                    success
-                    large
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     style={[styles.mv3]}
-                    text={translate('samlSignIn.useSingleSignOn')}
                     isLoading={account?.isLoading}
                     onPress={() => {
                         Navigation.navigate(ROUTES.SAML_SIGN_IN);
                     }}
                     sentryLabel={CONST.SENTRY_LABEL.SIGN_IN.SSO}
-                />
+                >
+                    <Button.Text>{translate('samlSignIn.useSingleSignOn')}</Button.Text>
+                </Button>
 
                 <View style={[styles.mt5]}>
                     <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>
@@ -74,15 +75,16 @@ function ChooseSSOOrValidateCode({setIsUsingValidateCode}: ChooseSSOOrValidateCo
                 <Button
                     isDisabled={isOffline}
                     style={[styles.mv3]}
-                    large
-                    text={translate('samlSignIn.useSecurityCode')}
+                    size={CONST.BUTTON_SIZE.LARGE}
                     isLoading={account?.isLoading && account?.loadingForm === (account?.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)}
                     onPress={() => {
                         resendValidateCode({reasonCode: COMMON_CONST.VALIDATE_CODE_REASONS.SIGN_IN}, credentials?.login);
                         setIsUsingValidateCode(true);
                     }}
                     sentryLabel={CONST.SENTRY_LABEL.SIGN_IN.VALIDATE_CODE}
-                />
+                >
+                    <Button.Text>{translate('samlSignIn.useSecurityCode')}</Button.Text>
+                </Button>
                 {!!account && !isEmptyObject(account.errors) && <FormHelpMessage message={getLatestErrorMessage(account)} />}
                 <ChangeExpensifyLoginLink onPress={() => clearSignInData()} />
             </View>
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index e2f750504502..1e6f423a0f77 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -353,11 +353,12 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                             {isSelectedMemberOwner && isCurrentUserAdmin && !isCurrentUserOwner ? (
                                 shouldRenderTransferOwnerButton(fundList) && (
                                     <ButtonDisabledWhenOffline
-                                        text={translate('workspace.people.transferOwner')}
                                         onPress={startChangeOwnershipFlow}
-                                        icon={icons.Transfer}
                                         style={styles.mb5}
-                                    />
+                                    >
+                                        <Button.Icon src={icons.Transfer} />
+                                        <Button.Text>{translate('workspace.people.transferOwner')}</Button.Text>
+                                    </ButtonDisabledWhenOffline>
                                 )
                             ) : (
                                 <Button
diff --git a/tests/unit/ConfirmContentTest.tsx b/tests/unit/ConfirmContentTest.tsx
index 730838af40f9..746dfc2030ff 100644
--- a/tests/unit/ConfirmContentTest.tsx
+++ b/tests/unit/ConfirmContentTest.tsx
@@ -2,26 +2,32 @@ import {render} from '@testing-library/react-native';
 
 import ConfirmContent from '@components/ConfirmContent';
 
+import CONST from '@src/CONST';
+
 import React from 'react';
 
 type ButtonProps = {
-    success?: boolean;
-    danger?: boolean;
-    text?: string;
+    variant?: string;
     onPress?: () => void;
+    children?: React.ReactNode;
     [key: string]: unknown;
 };
 
 const mockButtonSpy = jest.fn<void, [ButtonProps]>();
 
-jest.mock('@components/Button', () => {
+jest.mock('@components/ButtonComposed', () => {
     const ReactLib = jest.requireActual<typeof React>('react');
+    const MockButton = (props: ButtonProps) => {
+        mockButtonSpy(props);
+        return ReactLib.createElement('mock-button', props);
+    };
     return {
         __esModule: true,
-        default: (props: ButtonProps) => {
-            mockButtonSpy(props);
-            return ReactLib.createElement('mock-button', props);
-        },
+        default: Object.assign(MockButton, {
+            Text: () => null,
+            Icon: () => null,
+            KeyboardShortcut: () => null,
+        }),
     };
 });
 
@@ -65,12 +71,9 @@ describe('ConfirmContent', () => {
         mockButtonSpy.mockClear();
     });
 
-    function getConfirmButtonProps(shouldStackButtons: boolean): ButtonProps | undefined {
+    function getConfirmButtonProps(onConfirm: () => void): ButtonProps | undefined {
         const calls = mockButtonSpy.mock.calls;
-        if (shouldStackButtons) {
-            return calls.find((call) => call[0].pressOnEnter)?.[0];
-        }
-        return calls.find((call) => call[0].pressOnEnter)?.[0];
+        return calls.find((call) => call[0].onPress === onConfirm)?.[0];
     }
 
     const testCases = [
@@ -84,15 +87,26 @@ describe('ConfirmContent', () => {
         {shouldShowCancelButton: true, danger: true, success: true, expectedSuccess: false},
     ];
 
+    function expectedVariant(danger: boolean, expectedSuccess: boolean): string | undefined {
+        if (danger) {
+            return CONST.BUTTON_VARIANT.DANGER;
+        }
+        if (expectedSuccess) {
+            return CONST.BUTTON_VARIANT.SUCCESS;
+        }
+        return undefined;
+    }
+
     describe('stacked buttons (shouldStackButtons=true)', () => {
         it.each(testCases)(
-            'confirm button success=$expectedSuccess when shouldShowCancelButton=$shouldShowCancelButton, danger=$danger, success=$success',
+            'confirm button variant=$expectedSuccess when shouldShowCancelButton=$shouldShowCancelButton, danger=$danger, success=$success',
             ({shouldShowCancelButton, danger, success, expectedSuccess}) => {
                 mockButtonSpy.mockClear();
+                const onConfirm = jest.fn();
                 render(
                     <ConfirmContent
                         title="Test"
-                        onConfirm={jest.fn()}
+                        onConfirm={onConfirm}
                         isVisible
                         shouldStackButtons
                         shouldShowCancelButton={shouldShowCancelButton}
@@ -101,22 +115,22 @@ describe('ConfirmContent', () => {
                     />,
                 );
 
-                const confirmProps = getConfirmButtonProps(true);
-                expect(confirmProps?.success).toBe(expectedSuccess);
-                expect(confirmProps?.danger).toBe(danger);
+                const confirmProps = getConfirmButtonProps(onConfirm);
+                expect(confirmProps?.variant).toBe(expectedVariant(danger, expectedSuccess));
             },
         );
     });
 
     describe('side-by-side buttons (shouldStackButtons=false)', () => {
         it.each(testCases)(
-            'confirm button success=$expectedSuccess when shouldShowCancelButton=$shouldShowCancelButton, danger=$danger, success=$success',
+            'confirm button variant=$expectedSuccess when shouldShowCancelButton=$shouldShowCancelButton, danger=$danger, success=$success',
             ({shouldShowCancelButton, danger, success, expectedSuccess}) => {
                 mockButtonSpy.mockClear();
+                const onConfirm = jest.fn();
                 render(
                     <ConfirmContent
                         title="Test"
-                        onConfirm={jest.fn()}
+                        onConfirm={onConfirm}
                         isVisible
                         shouldStackButtons={false}
                         shouldShowCancelButton={shouldShowCancelButton}
@@ -125,9 +139,8 @@ describe('ConfirmContent', () => {
                     />,
                 );
 
-                const confirmProps = getConfirmButtonProps(false);
-                expect(confirmProps?.success).toBe(expectedSuccess);
-                expect(confirmProps?.danger).toBe(danger);
+                const confirmProps = getConfirmButtonProps(onConfirm);
+                expect(confirmProps?.variant).toBe(expectedVariant(danger, expectedSuccess));
             },
         );
     });