diff --git a/src/components/AnimatedSubmitButton/index.tsx b/src/components/AnimatedSubmitButton/index.tsx
index 73f141cab74b..7e7f86714c41 100644
--- a/src/components/AnimatedSubmitButton/index.tsx
+++ b/src/components/AnimatedSubmitButton/index.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -22,28 +22,28 @@ import Animated, {Keyframe, useAnimatedStyle, useSharedValue, withTiming} from '
 import {scheduleOnRN} from 'react-native-worklets';
 
 type AnimatedSubmitButtonProps = WithSentryLabel & {
-    // Whether to show the success state
-    success: boolean | undefined;
+    /** Submit buttons support the default and success styles; danger is not a valid submit state. */
+    variant?: typeof CONST.BUTTON_VARIANT.SUCCESS;
 
-    // Text to show on the button
+    /** Text to show on the button */
     text: string;
 
-    // Function to call when the button is pressed
+    /** Function to call when the button is pressed */
     onPress: () => void;
 
-    // Whether the animation is running
+    /** Whether the animation is running */
     isSubmittingAnimationRunning: boolean;
 
-    // Function to call when the animation finishes
+    /** Function to call when the animation finishes */
     onAnimationFinish: () => void;
 
-    // Whether the button should be disabled
+    /** Whether the button should be disabled */
     isDisabled?: boolean;
 
-    // Whether this is a DEW submission that needs backend validation before showing "Submitted"
+    /** Whether this is a DEW submission that needs backend validation before showing "Submitted" */
     isDEWSubmission?: boolean;
 
-    // The report id for which the button is displayed
+    /** The report id for which the button is displayed */
     reportID?: string;
 
     /** Whether to show "Mark as done" copy instead of "Submit" copy for track-intent users */
@@ -53,7 +53,7 @@ type AnimatedSubmitButtonProps = WithSentryLabel & {
 const pendingExpenseActionSelector = (reportMetadata: OnyxEntry<ReportMetadata>) => reportMetadata?.pendingExpenseAction;
 
 function AnimatedSubmitButton({
-    success,
+    variant,
     text,
     onPress,
     isSubmittingAnimationRunning,
@@ -110,7 +110,6 @@ function AnimatedSubmitButton({
         [buttonDuration, stretchOutY],
     );
     const icons = useMemoizedLazyExpensifyIcons(['Send']);
-    const icon = isAnimationRunning ? icons.Send : null;
 
     useEffect(() => {
         if (!isAnimationRunning) {
@@ -159,6 +158,7 @@ function AnimatedSubmitButton({
 
     // eslint-disable-next-line react-hooks/refs
     const showLoading = isShowingLoading || (isAnimationRunning && (!viewRef.current || (isDEWSubmission && !isDEWSubmissionComplete)));
+    const shouldShowIcon = isAnimationRunning && !showLoading;
 
     return (
         <Animated.View style={[containerStyles, {minWidth}]}>
@@ -170,24 +170,25 @@ function AnimatedSubmitButton({
                     exiting={buttonAnimation}
                 >
                     <Button
-                        success={success}
-                        text={showLoading ? text : translate(isMarkAsDone ? 'common.markedAsDoneStatus' : 'common.submitted')}
+                        variant={variant}
                         isLoading={showLoading}
-                        icon={!showLoading ? icon : undefined}
                         isDisabled
-                        shouldStayNormalOnDisable
-                    />
+                        stayNormalOnDisable
+                    >
+                        {shouldShowIcon && <Button.Icon src={icons.Send} />}
+                        <Button.Text>{shouldShowIcon ? translate(isMarkAsDone ? 'common.markedAsDoneStatus' : 'common.submitted') : text}</Button.Text>
+                    </Button>
                 </Animated.View>
             )}
             {!isAnimationRunning && (
                 <Button
-                    success={success}
-                    text={text}
+                    variant={variant}
                     onPress={onPress}
-                    icon={icon}
                     isDisabled={isDisabled}
                     sentryLabel={sentryLabel}
-                />
+                >
+                    <Button.Text>{text}</Button.Text>
+                </Button>
             )}
         </Animated.View>
     );
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
index 39f19ec78db0..84ef71f518e2 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
@@ -1,5 +1,5 @@
 import type {Attachment} from '@components/Attachments/types';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Tooltip from '@components/Tooltip';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -51,15 +51,19 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                 <Tooltip text={translate('common.previous')}>
                     <View style={[styles.attachmentArrow, shouldUseNarrowLayout ? styles.l2 : styles.l8]}>
                         <Button
-                            small
-                            innerStyles={[styles.arrowIcon]}
-                            icon={icons.BackArrow}
-                            iconFill={theme.text}
+                            size={CONST.BUTTON_SIZE.SMALL}
+                            innerStyles={styles.arrowIcon}
                             onPress={onBack}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
                             sentryLabel={CONST.SENTRY_LABEL.ATTACHMENT_CAROUSEL.PREVIOUS_BUTTON}
-                        />
+                        >
+                            <Button.Icon
+                                src={icons.BackArrow}
+                                fill={theme.text}
+                                hoverFill={theme.text}
+                            />
+                        </Button>
                     </View>
                 </Tooltip>
             )}
@@ -67,15 +71,19 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                 <Tooltip text={translate('common.next')}>
                     <View style={[styles.attachmentArrow, shouldUseNarrowLayout ? styles.r2 : styles.r8]}>
                         <Button
-                            small
+                            size={CONST.BUTTON_SIZE.SMALL}
                             innerStyles={[styles.arrowIcon]}
-                            icon={icons.ArrowRight}
-                            iconFill={theme.text}
                             onPress={onForward}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
                             sentryLabel={CONST.SENTRY_LABEL.ATTACHMENT_CAROUSEL.NEXT_BUTTON}
-                        />
+                        >
+                            <Button.Icon
+                                src={icons.ArrowRight}
+                                fill={theme.text}
+                                hoverFill={theme.text}
+                            />
+                        </Button>
                     </View>
                 </Tooltip>
             )}
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
index b453f7c8cfff..cdc1162700fb 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
@@ -1,6 +1,6 @@
 import AttachmentView from '@components/Attachments/AttachmentView';
 import type {Attachment} from '@components/Attachments/types';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
@@ -48,8 +48,10 @@ function CarouselItem({item, onPress, isFocused, isModalHovered, reportID}: Caro
 
     const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
-            small
+            size={CONST.BUTTON_SIZE.SMALL}
             style={style}
+            // Restores the 12px horizontal padding from the legacy implementation.
+            innerStyles={styles.ph3}
             onPress={() => setIsHidden(!isHidden)}
             testID="moderationButton"
             sentryLabel={CONST.SENTRY_LABEL.ATTACHMENT_CAROUSEL.MODERATION_BUTTON}
diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx
index ac29c74dcc1f..9aa2d9cf8d97 100644
--- a/src/components/Attachments/AttachmentView/index.tsx
+++ b/src/components/Attachments/AttachmentView/index.tsx
@@ -1,7 +1,7 @@
 import {useAttachmentCarouselPagerActions} from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import MultiGestureIcon from '@components/Attachments/MultiGestureIcon';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import DistanceEReceipt from '@components/DistanceEReceipt';
 import EReceipt from '@components/EReceipt';
 import Icon from '@components/Icon';
@@ -346,8 +346,6 @@ function AttachmentView({
                         <Text style={[styles.notFoundTextHeader]}>{translate('attachmentView.attachmentNotFound')}</Text>
                     </View>
                     <Button
-                        text={translate('attachmentView.retry')}
-                        icon={icons.ArrowCircleClockwise}
                         onPress={() => {
                             if (isOffline) {
                                 return;
@@ -355,7 +353,10 @@ function AttachmentView({
                             setImageError(false);
                         }}
                         sentryLabel={CONST.SENTRY_LABEL.ATTACHMENT_CAROUSEL.RETRY_BUTTON}
-                    />
+                    >
+                        <Button.Icon src={icons.ArrowCircleClockwise} />
+                        <Button.Text>{translate('attachmentView.retry')}</Button.Text>
+                    </Button>
                 </View>
             );
         }
diff --git a/src/components/Domain/CopyableTextField.tsx b/src/components/Domain/CopyableTextField.tsx
index b3795cc01489..069d1505936f 100644
--- a/src/components/Domain/CopyableTextField.tsx
+++ b/src/components/Domain/CopyableTextField.tsx
@@ -1,5 +1,5 @@
 import ActivityIndicator from '@components/ActivityIndicator';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import CopyTextToClipboard from '@components/CopyTextToClipboard';
 import Text from '@components/Text';
 
@@ -10,6 +10,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 
+import CONST from '@src/CONST';
+
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 
 import React, {useState} from 'react';
@@ -71,12 +73,12 @@ function CopyableTextField({value, isLoading = false, style, textStyle, shouldDi
                     </View>
                     {shouldDisplayShowMoreButton && (
                         <Button
-                            small
-                            text={translate(expanded ? 'common.showLess' : 'common.showMore')}
+                            size={CONST.BUTTON_SIZE.SMALL}
                             onPress={() => setExpanded((current) => !current)}
-                            shouldShowRightIcon
-                            iconRight={expanded ? icons.UpArrow : icons.DownArrow}
-                        />
+                        >
+                            <Button.Text>{translate(expanded ? 'common.showLess' : 'common.showMore')}</Button.Text>
+                            <Button.Icon src={expanded ? icons.UpArrow : icons.DownArrow} />
+                        </Button>
                     )}
                 </>
             )}
diff --git a/src/components/MapView/GPSMapView.tsx b/src/components/MapView/GPSMapView.tsx
index 950bf3932161..c4c7094a286e 100644
--- a/src/components/MapView/GPSMapView.tsx
+++ b/src/components/MapView/GPSMapView.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ImageSVG from '@components/ImageSVG';
 
 import useAppFocusEvent from '@hooks/useAppFocusEvent';
@@ -319,10 +319,14 @@ function GPSMapView({accessToken, style, mapPadding, styleURL, pitchEnabled, way
             <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, styles.zIndex1]}>
                 <Button
                     onPress={centerMap}
-                    iconFill={theme.icon}
-                    icon={expensifyIcons.Crosshair}
                     accessibilityLabel={translate('common.center')}
-                />
+                >
+                    <Button.Icon
+                        src={expensifyIcons.Crosshair}
+                        fill={theme.icon}
+                        hoverFill={theme.icon}
+                    />
+                </Button>
             </View>
         </View>
     ) : (
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index c4e1be1d8096..3ddb3179a248 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 
@@ -374,10 +374,14 @@ function MapView({
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, styles.zIndex1]}>
                     <Button
                         onPress={centerMap}
-                        iconFill={theme.icon}
-                        icon={expensifyIcons.Crosshair}
                         accessibilityLabel={translate('common.center')}
-                    />
+                    >
+                        <Button.Icon
+                            src={expensifyIcons.Crosshair}
+                            fill={theme.icon}
+                            hoverFill={theme.icon}
+                        />
+                    </Button>
                 </View>
             )}
         </View>
diff --git a/src/components/MapView/MapViewImpl.web.tsx b/src/components/MapView/MapViewImpl.web.tsx
index 09d3ed49038d..323f6e5700ed 100644
--- a/src/components/MapView/MapViewImpl.web.tsx
+++ b/src/components/MapView/MapViewImpl.web.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 import ImageSVG from '@components/ImageSVG';
@@ -335,10 +335,14 @@ function MapViewImpl({
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, styles.zIndex1]}>
                     <Button
                         onPress={centerMap}
-                        iconFill={theme.icon}
-                        icon={expensifyIcons.Crosshair}
                         accessibilityLabel={translate('common.center')}
-                    />
+                    >
+                        <Button.Icon
+                            src={expensifyIcons.Crosshair}
+                            fill={theme.icon}
+                            hoverFill={theme.icon}
+                        />
+                    </Button>
                 </View>
             )}
         </View>
diff --git a/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx b/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx
index 8138f82278c2..ed1574f1e486 100644
--- a/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx
+++ b/src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx
@@ -257,7 +257,7 @@ function SubmitPrimaryActionContent({reportID}: SubmitPrimaryActionProps) {
 
     return (
         <AnimatedSubmitButton
-            success
+            variant={CONST.BUTTON_VARIANT.SUCCESS}
             text={shouldUseMarkAsDoneCopy ? translate('common.markAsDone') : translate('common.submit')}
             isMarkAsDone={shouldUseMarkAsDoneCopy}
             onPress={() => handleSubmit()}
diff --git a/src/components/ReportActionItem/ChronosOOOListActions.tsx b/src/components/ReportActionItem/ChronosOOOListActions.tsx
index eea23f59381f..d69e0d809bb9 100644
--- a/src/components/ReportActionItem/ChronosOOOListActions.tsx
+++ b/src/components/ReportActionItem/ChronosOOOListActions.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 
@@ -10,7 +10,7 @@ import {getOriginalMessage} from '@libs/ReportActionsUtils';
 
 import {removeEvent} from '@userActions/Chronos';
 
-import type CONST from '@src/CONST';
+import CONST from '@src/CONST';
 import type ReportAction from '@src/types/onyx/ReportAction';
 
 import React from 'react';
@@ -61,8 +61,10 @@ function ChronosOOOListActions({reportID, action}: ChronosOOOListActionsProps) {
                                       )}
                             </Text>
                             <Button
-                                small
+                                size={CONST.BUTTON_SIZE.SMALL}
                                 style={styles.pl2}
+                                // Restores the 12px horizontal padding from the legacy implementation.
+                                innerStyles={styles.ph3}
                                 onPress={() => removeEvent(reportID, action.reportActionID, event.id, events)}
                             >
                                 <Text style={styles.buttonSmallText}>{translate('common.remove')}</Text>
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx
index 92d42fcbe149..0e61fc74c28f 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx
@@ -129,7 +129,7 @@ function SubmitActionButtonContent() {
 
     return (
         <AnimatedSubmitButton
-            success
+            variant={CONST.BUTTON_VARIANT.SUCCESS}
             text={shouldUseMarkAsDoneCopy ? translate('common.markAsDone') : translate('common.submit')}
             isMarkAsDone={shouldUseMarkAsDoneCopy}
             onPress={handleSubmit}
diff --git a/src/components/Search/SearchPageHeader/SearchSaveButton.tsx b/src/components/Search/SearchPageHeader/SearchSaveButton.tsx
index 980bd96667dc..cc449f1ec9c8 100644
--- a/src/components/Search/SearchPageHeader/SearchSaveButton.tsx
+++ b/src/components/Search/SearchPageHeader/SearchSaveButton.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
 import {PressableWithFeedback} from '@components/Pressable';
 
@@ -51,12 +51,13 @@ function SearchSaveButton() {
 
     return (
         <Button
-            small
-            icon={expensifyIcons.Bookmark}
-            text={translate('common.save')}
+            size={CONST.BUTTON_SIZE.SMALL}
             onPress={openSaveSearchPage}
             sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_SAVE_BUTTON}
-        />
+        >
+            <Button.Icon src={expensifyIcons.Bookmark} />
+            <Button.Text>{translate('common.save')}</Button.Text>
+        </Button>
     );
 }
 
diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx
index 6401ae99a621..2474c60ac8e0 100644
--- a/src/components/SettlementButton/AnimatedSettlementButton.tsx
+++ b/src/components/SettlementButton/AnimatedSettlementButton.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -173,11 +173,12 @@ function AnimatedSettlementButton({
                     exiting={buttonAnimation}
                 >
                     <Button
-                        text={isApprovedAnimationRunning ? translate('iou.approved') : translate('iou.paymentComplete')}
+                        variant={CONST.BUTTON_VARIANT.SUCCESS}
                         isLoading={isDEWApprovalLoading}
-                        success
-                        icon={icon}
-                    />
+                    >
+                        {!!icon && <Button.Icon src={icon} />}
+                        <Button.Text>{isApprovedAnimationRunning ? translate('iou.approved') : translate('iou.paymentComplete')}</Button.Text>
+                    </Button>
                 </Animated.View>
             )}
             {!isAnimationRunning && (
diff --git a/src/pages/Debug/DebugJSON.tsx b/src/pages/Debug/DebugJSON.tsx
index 29814e8e2855..67ad85765de8 100644
--- a/src/pages/Debug/DebugJSON.tsx
+++ b/src/pages/Debug/DebugJSON.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ScrollView from '@components/ScrollView';
 import SwipeInterceptPanResponder from '@components/SwipeInterceptPanResponder';
 import Text from '@components/Text';
@@ -34,13 +34,14 @@ function DebugJSON({data}: DebugJSONProps) {
         >
             <Button
                 isDisabled={!isThrottledButtonActive}
-                text={isThrottledButtonActive ? translate('reportActionContextMenu.copyOnyxData') : translate('reportActionContextMenu.copied')}
                 onPress={() => {
                     Clipboard.setString(json);
                     setThrottledButtonInactive();
                 }}
-                icon={icons.Copy}
-            />
+            >
+                <Button.Icon src={icons.Copy} />
+                <Button.Text>{isThrottledButtonActive ? translate('reportActionContextMenu.copyOnyxData') : translate('reportActionContextMenu.copied')}</Button.Text>
+            </Button>
             <View {...SwipeInterceptPanResponder.panHandlers}>
                 <Text style={[styles.textLabel, styles.mb5, styles.border, styles.p2]}>{json}</Text>
             </View>
diff --git a/src/pages/Debug/Report/DebugReportPage.tsx b/src/pages/Debug/Report/DebugReportPage.tsx
index 5fcf434f013b..5c34f0b46706 100644
--- a/src/pages/Debug/Report/DebugReportPage.tsx
+++ b/src/pages/Debug/Report/DebugReportPage.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
@@ -225,27 +225,28 @@ function DebugReportPage({
                             </View>
                             {!!message && <Text style={styles.textSupporting}>{message}</Text>}
                             {!!action && (
-                                <Button
-                                    text={action.name}
-                                    onPress={action.callback}
-                                />
+                                <Button onPress={action.callback}>
+                                    <Button.Text>{action.name}</Button.Text>
+                                </Button>
                             )}
                         </View>
                     ))}
                     <Button
-                        text={translate('debug.viewReport')}
                         onPress={() => {
                             Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportID));
                         }}
-                        icon={icons.Eye}
-                    />
+                    >
+                        <Button.Icon src={icons.Eye} />
+                        <Button.Text>{translate('debug.viewReport')}</Button.Text>
+                    </Button>
                     {!!transactionID && (
                         <Button
-                            text={translate('debug.viewTransaction')}
                             onPress={() => {
                                 Navigation.navigate(ROUTES.DEBUG_TRANSACTION.getRoute(transactionID));
                             }}
-                        />
+                        >
+                            <Button.Text>{translate('debug.viewTransaction')}</Button.Text>
+                        </Button>
                     )}
                 </View>
             </DebugDetails>
diff --git a/src/pages/MissingPersonalDetails/subPages/PIN.tsx b/src/pages/MissingPersonalDetails/subPages/PIN.tsx
index de1f06b5ffc9..1f5caa4e596c 100644
--- a/src/pages/MissingPersonalDetails/subPages/PIN.tsx
+++ b/src/pages/MissingPersonalDetails/subPages/PIN.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import FormProvider from '@components/Form/FormProvider';
 import Text from '@components/Text';
 import ValidateCodeInput from '@components/ValidateCodeInput';
@@ -114,12 +114,10 @@ function PIN({onNext}: CustomSubPageProps) {
                 </View>
 
                 <View style={[styles.flexRow, styles.justifyContentCenter, styles.mv4, styles.alignItemsCenter, styles.w100]}>
-                    <Button
-                        icon={isPINHidden ? icons.Eye : icons.EyeDisabled}
-                        text={isPINHidden ? translate('cardPage.revealPin') : translate('cardPage.hidePin')}
-                        onPress={togglePINVisibility}
-                        medium
-                    />
+                    <Button onPress={togglePINVisibility}>
+                        <Button.Icon src={isPINHidden ? icons.Eye : icons.EyeDisabled} />
+                        <Button.Text>{isPINHidden ? translate('cardPage.revealPin') : translate('cardPage.hidePin')}</Button.Text>
+                    </Button>
                 </View>
             </View>
         </FormProvider>
diff --git a/src/pages/TransactionMerge/TransactionMergeReceipts.tsx b/src/pages/TransactionMerge/TransactionMergeReceipts.tsx
index cee8c2a20521..27376e9d31bc 100644
--- a/src/pages/TransactionMerge/TransactionMergeReceipts.tsx
+++ b/src/pages/TransactionMerge/TransactionMergeReceipts.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import RadioButton from '@components/RadioButton';
 import ReportActionItemImage from '@components/ReportActionItem/ReportActionItemImage';
@@ -74,7 +74,6 @@ function TransactionMergeReceipts({transactions, selectedReceiptID, onSelect}: T
                                 <View style={[styles.pAbsolute, styles.b2, styles.r2]}>
                                     <Button
                                         innerStyles={styles.arrowIcon}
-                                        icon={expensifyIcons.Zoom}
                                         onPress={() => {
                                             Navigation.navigate(
                                                 ROUTES.TRANSACTION_RECEIPT.getRoute(
@@ -84,7 +83,9 @@ function TransactionMergeReceipts({transactions, selectedReceiptID, onSelect}: T
                                                 ),
                                             );
                                         }}
-                                    />
+                                    >
+                                        <Button.Icon src={expensifyIcons.Zoom} />
+                                    </Button>
                                 </View>
                             </View>
                         </PressableWithFeedback>
diff --git a/src/pages/domain/DomainsListPage.tsx b/src/pages/domain/DomainsListPage.tsx
index 4d7eab5ccbea..b7ac0300784c 100644
--- a/src/pages/domain/DomainsListPage.tsx
+++ b/src/pages/domain/DomainsListPage.tsx
@@ -1,5 +1,5 @@
 import ActivityIndicator from '@components/ActivityIndicator';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import type {DomainRowData} from '@components/Tables/DomainListTable';
 import DomainListTable from '@components/Tables/DomainListTable';
 import WorkspaceListLayout from '@components/WorkspaceListLayout';
@@ -83,13 +83,14 @@ function DomainsListPage() {
 
     const headerButton = !!domainRows.length && (
         <Button
-            success
+            variant={CONST.BUTTON_VARIANT.SUCCESS}
             accessibilityLabel={translate('common.new')}
-            text={translate('common.new')}
             sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.NEW_DOMAIN_BUTTON}
             onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACES_ADD_DOMAIN))}
-            icon={icons.Plus}
-        />
+        >
+            <Button.Icon src={icons.Plus} />
+            <Button.Text>{translate('common.new')}</Button.Text>
+        </Button>
     );
 
     return (
diff --git a/src/pages/inbox/report/FloatingMessageCounter.tsx b/src/pages/inbox/report/FloatingMessageCounter.tsx
index 98d9989b3f74..f19df402b9dc 100644
--- a/src/pages/inbox/report/FloatingMessageCounter.tsx
+++ b/src/pages/inbox/report/FloatingMessageCounter.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import Icon from '@components/Icon';
 import Text from '@components/Text';
 import getActionBadgeText from '@components/utils/getActionBadgeText';
@@ -8,6 +8,8 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import type {ButtonVariant} from '@styles/utils/types';
+
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 
@@ -19,11 +21,8 @@ import {View} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
 
 type FloatingPillButtonProps = {
-    /** Whether the button uses the success style */
-    success: boolean;
-
-    /** Whether the button uses the danger style */
-    danger?: boolean;
+    /** Inner button variant */
+    variant?: ButtonVariant;
 
     /** Callback when the button is pressed */
     onPress?: () => void;
@@ -41,16 +40,17 @@ type FloatingPillButtonProps = {
     textStyle?: StyleProp<TextStyle>;
 };
 
-function FloatingPillButton({success, danger, onPress, icon, iconFill, label, textStyle}: FloatingPillButtonProps) {
+function FloatingPillButton({variant, onPress, icon, iconFill, label, textStyle}: FloatingPillButtonProps) {
     const styles = useThemeStyles();
 
     return (
         <Button
-            success={success}
-            danger={danger}
-            small
+            variant={variant}
+            size={CONST.BUTTON_SIZE.SMALL}
             onPress={onPress}
             sentryLabel={CONST.SENTRY_LABEL.REPORT.FLOATING_MESSAGE_COUNTER}
+            // Restores the 12px horizontal padding from the legacy implementation.
+            innerStyles={styles.ph3}
         >
             <View style={[styles.flexRow, styles.alignItemsCenter]}>
                 <Icon
@@ -150,8 +150,7 @@ function FloatingMessageCounter({
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
                     {shouldShowActionBadgePill ? (
                         <FloatingPillButton
-                            success={!isError}
-                            danger={isError}
+                            variant={isError ? CONST.BUTTON_VARIANT.DANGER : CONST.BUTTON_VARIANT.SUCCESS}
                             onPress={onActionBadgePress}
                             icon={icons.UpArrow}
                             iconFill={theme.textLight}
@@ -160,7 +159,7 @@ function FloatingMessageCounter({
                         />
                     ) : (
                         <FloatingPillButton
-                            success={hasNewMessages}
+                            variant={hasNewMessages ? CONST.BUTTON_VARIANT.SUCCESS : undefined}
                             onPress={onClick}
                             icon={icons.DownArrow}
                             iconFill={hasNewMessages ? theme.textLight : theme.icon}
diff --git a/src/pages/inbox/report/ShowPreviousMessagesButton.tsx b/src/pages/inbox/report/ShowPreviousMessagesButton.tsx
index e4d577ab14b4..a79be7182b07 100644
--- a/src/pages/inbox/report/ShowPreviousMessagesButton.tsx
+++ b/src/pages/inbox/report/ShowPreviousMessagesButton.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -57,12 +57,12 @@ function ShowPreviousMessagesButton({reportID, actionType, hasPreviousMessages,
             <View style={[styles.threadDividerLine, styles.ml0, styles.mr0, styles.flexGrow1]} />
             <View>
                 <Button
-                    small
-                    shouldShowRightIcon
-                    iconRight={expensifyIcons.UpArrow}
-                    text={translate('common.concierge.showHistory')}
+                    size={CONST.BUTTON_SIZE.SMALL}
                     onPress={onPress}
-                />
+                >
+                    <Button.Text>{translate('common.concierge.showHistory')}</Button.Text>
+                    <Button.Icon src={expensifyIcons.UpArrow} />
+                </Button>
             </View>
             <View style={[styles.threadDividerLine, styles.ml0, styles.mr0, styles.flexGrow1]} />
         </View>
diff --git a/src/pages/inbox/report/actionContents/ChatMessageContent.tsx b/src/pages/inbox/report/actionContents/ChatMessageContent.tsx
index a2f69b60cb67..72a02fc3eea7 100644
--- a/src/pages/inbox/report/actionContents/ChatMessageContent.tsx
+++ b/src/pages/inbox/report/actionContents/ChatMessageContent.tsx
@@ -1,5 +1,5 @@
 import {AttachmentContext} from '@components/AttachmentContext';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
 import Text from '@components/Text';
 
@@ -88,8 +88,10 @@ function ChatMessageContent({action, policyID, reportID, originalReportID, displ
                         />
                         {hasBeenFlagged && (
                             <Button
-                                small
+                                size={CONST.BUTTON_SIZE.SMALL}
                                 style={[styles.mt2, styles.alignSelfStart]}
+                                // Restores the 12px horizontal padding from the legacy implementation.
+                                innerStyles={styles.ph3}
                                 onPress={() => updateHiddenState(!isHidden)}
                                 sentryLabel={CONST.SENTRY_LABEL.REPORT.MODERATION_BUTTON}
                             >
diff --git a/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx
index 8c7b75b94c00..da11823a7855 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx
+++ b/src/pages/iou/request/step/IOURequestStepScan/ReceiptView/index.tsx
@@ -2,7 +2,7 @@ import AttachmentCarouselView from '@components/Attachments/AttachmentCarousel/A
 import useCarouselArrows from '@components/Attachments/AttachmentCarousel/useCarouselArrows';
 import useAttachmentErrors from '@components/Attachments/AttachmentView/useAttachmentErrors';
 import type {Attachment} from '@components/Attachments/types';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -110,13 +110,13 @@ function ReceiptView({route}: ReceiptViewProps) {
                 onBackButtonPress={handleGoBack}
             >
                 <Button
-                    shouldShowRightIcon
-                    iconRight={expensifyIcons.Trashcan}
                     onPress={handleDeleteReceiptPress}
                     innerStyles={styles.bgTransparent}
-                    large
+                    size={CONST.BUTTON_SIZE.LARGE}
                     sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.RECEIPT_DELETE_BUTTON}
-                />
+                >
+                    <Button.Icon src={expensifyIcons.Trashcan} />
+                </Button>
             </HeaderWithBackButton>
             <AttachmentCarouselView
                 attachments={receipts as Attachment[]}
diff --git a/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx
index 1a0ef65ca70d..0974caa8bc22 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx
+++ b/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import FlatList from '@components/FlatList/FlatList';
 import Image from '@components/Image';
 import {PressableWithFeedback} from '@components/Pressable';
@@ -145,14 +145,18 @@ function ReceiptPreviews({submit, isMultiScanEnabled, isCapturingPhoto = false,
                 />
                 <SubmitButtonShadow isInLandscapeMode={isInLandscapeMode}>
                     <Button
-                        large
+                        size={CONST.BUTTON_SIZE.LARGE}
                         isDisabled={!optimisticTransactionsReceipts.length || isCapturingPhoto}
                         innerStyles={[styles.singleAvatarXLarge, styles.bgGreenSuccess]}
-                        icon={icons.ArrowRight}
-                        iconFill={theme.white}
                         onPress={submit}
                         sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.RECEIPT_PREVIEW_SUBMIT_BUTTON}
-                    />
+                    >
+                        <Button.Icon
+                            src={icons.ArrowRight}
+                            fill={theme.white}
+                            hoverFill={theme.white}
+                        />
+                    </Button>
                 </SubmitButtonShadow>
             </View>
         </Animated.View>
diff --git a/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx b/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx
index 9166a7b33053..8490fc61d38a 100644
--- a/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx
+++ b/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx
@@ -1,7 +1,7 @@
 import AttachmentPicker from '@components/AttachmentPicker';
 import Avatar from '@components/Avatar';
 import AvatarPageFooter from '@components/AvatarPageFooter';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {PressableWithFeedback} from '@components/Pressable';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -172,15 +172,16 @@ function EditAgentAvatarContent({accountID, fallbackRoute, onSave, initialPreset
                     >
                         {({openPicker}) => (
                             <Button
-                                icon={icons.Upload}
-                                text={translate('avatarPage.uploadPhoto')}
                                 accessibilityLabel={translate('avatarPage.uploadPhoto')}
                                 onPress={() => {
                                     openPicker({
                                         onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
                                     });
                                 }}
-                            />
+                            >
+                                <Button.Icon src={icons.Upload} />
+                                <Button.Text>{translate('avatarPage.uploadPhoto')}</Button.Text>
+                            </Button>
                         )}
                     </AttachmentPicker>
                 </View>
diff --git a/src/pages/settings/Profile/Avatar/AvatarPreview.tsx b/src/pages/settings/Profile/Avatar/AvatarPreview.tsx
index 440defd8b5a7..840e2e47aa29 100644
--- a/src/pages/settings/Profile/Avatar/AvatarPreview.tsx
+++ b/src/pages/settings/Profile/Avatar/AvatarPreview.tsx
@@ -1,6 +1,6 @@
 import AttachmentPicker from '@components/AttachmentPicker';
 import Avatar from '@components/Avatar';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import UserInitialsAvatar from '@components/UserInitialsAvatar';
 
@@ -149,15 +149,16 @@ function AvatarPreview({selected, isRemoved, onImageRemoved, imageData, setError
                     if (menuItems?.length <= 1) {
                         return (
                             <Button
-                                icon={icons.Upload}
-                                text={translate('avatarPage.uploadPhoto')}
                                 accessibilityLabel={translate('avatarPage.uploadPhoto')}
                                 onPress={() => {
                                     openPicker({
                                         onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
                                     });
                                 }}
-                            />
+                            >
+                                <Button.Icon src={icons.Upload} />
+                                <Button.Text>{translate('avatarPage.uploadPhoto')}</Button.Text>
+                            </Button>
                         );
                     }
 
diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
index c729b6dfab57..745f64ac5abb 100644
--- a/src/pages/settings/Subscription/CardSection/CardSection.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -249,25 +249,27 @@ function CardSection() {
             <View style={styles.mb3}>{isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}</View>
             {billingStatus?.isRetryAvailable !== undefined && (
                 <CardSectionButton
-                    text={translate('subscription.cardSection.retryPaymentButton')}
                     isDisabled={isOffline || !billingStatus?.isRetryAvailable}
                     isLoading={subscriptionRetryBillingStatusPending}
                     onPress={handleRetryPayment}
                     style={[styles.w100, styles.mb3]}
-                    large
+                    size={CONST.BUTTON_SIZE.LARGE}
                     sentryLabel={CONST.SENTRY_LABEL.SETTINGS_SUBSCRIPTION.RETRY_PAYMENT}
-                />
+                >
+                    <CardSectionButton.Text>{translate('subscription.cardSection.retryPaymentButton')}</CardSectionButton.Text>
+                </CardSectionButton>
             )}
             {hasCardAuthenticatedError(privateStripeCustomerID, amountOwed) && (
                 <CardSectionButton
-                    text={translate('subscription.cardSection.authenticatePayment')}
                     isDisabled={isOffline || !billingStatus?.isAuthenticationRequired}
                     isLoading={subscriptionRetryBillingStatusPending}
                     onPress={handleAuthenticatePayment}
                     style={[styles.w100, styles.mt5]}
-                    large
+                    size={CONST.BUTTON_SIZE.LARGE}
                     sentryLabel={CONST.SENTRY_LABEL.SETTINGS_SUBSCRIPTION.AUTHENTICATE_PAYMENT}
-                />
+                >
+                    <CardSectionButton.Text>{translate('subscription.cardSection.authenticatePayment')}</CardSectionButton.Text>
+                </CardSectionButton>
             )}
 
             {!!account?.hasPurchases && (
diff --git a/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx
index d17d9dd8832b..da971e8ec51c 100644
--- a/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx
@@ -1,8 +1,17 @@
-import type {ButtonProps} from '@components/Button';
+import type {ButtonProps} from '@components/ButtonComposed';
+import ButtonIcon from '@components/ButtonComposed/primitives/ButtonIcon';
+import ButtonKeyboardShortcut from '@components/ButtonComposed/primitives/ButtonKeyboardShortcut';
+import ButtonText from '@components/ButtonComposed/primitives/ButtonText';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function CardSectionButton(_props: ButtonProps) {
+function CardSectionButtonBase(_props: ButtonProps) {
     return null;
 }
 
+const CardSectionButton = Object.assign(CardSectionButtonBase, {
+    Icon: ButtonIcon,
+    Text: ButtonText,
+    KeyboardShortcut: ButtonKeyboardShortcut,
+});
+
 export default CardSectionButton;
diff --git a/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx
index 20d21258ac88..90835ac23c0f 100644
--- a/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx
@@ -1,10 +1,17 @@
-import type {ButtonProps} from '@components/Button';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
+import type {ButtonProps} from '@components/ButtonComposed';
+import ButtonIcon from '@components/ButtonComposed/primitives/ButtonIcon';
+import ButtonKeyboardShortcut from '@components/ButtonComposed/primitives/ButtonKeyboardShortcut';
+import ButtonText from '@components/ButtonComposed/primitives/ButtonText';
 
-import React from 'react';
-
-function CardSectionButton(props: ButtonProps) {
+function CardSectionButtonBase(props: ButtonProps) {
     return <Button {...props} />;
 }
 
+const CardSectionButton = Object.assign(CardSectionButtonBase, {
+    Icon: ButtonIcon,
+    Text: ButtonText,
+    KeyboardShortcut: ButtonKeyboardShortcut,
+});
+
 export default CardSectionButton;
diff --git a/src/pages/settings/Wallet/CardDetailsActionButtons.tsx b/src/pages/settings/Wallet/CardDetailsActionButtons.tsx
index 7b8810996779..cc5a27bc1300 100644
--- a/src/pages/settings/Wallet/CardDetailsActionButtons.tsx
+++ b/src/pages/settings/Wallet/CardDetailsActionButtons.tsx
@@ -1,5 +1,8 @@
-import Button from '@components/Button';
-import type {ButtonProps} from '@components/Button';
+import Button from '@components/ButtonComposed';
+import type {ButtonProps} from '@components/ButtonComposed';
+import ButtonIcon from '@components/ButtonComposed/primitives/ButtonIcon';
+import ButtonKeyboardShortcut from '@components/ButtonComposed/primitives/ButtonKeyboardShortcut';
+import ButtonText from '@components/ButtonComposed/primitives/ButtonText';
 
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -54,7 +57,7 @@ function CardDetailsActionButtons({children, style}: CardDetailsActionButtonsPro
     );
 }
 
-function CardDetailsActionButton({innerStyles, style, ...props}: ButtonProps) {
+function CardDetailsActionButtonBase({innerStyles, style, ...props}: ButtonProps) {
     const styles = useThemeStyles();
     const shouldUseEqualButtonWidths = React.useContext(CardDetailsActionButtonsContext);
 
@@ -67,5 +70,11 @@ function CardDetailsActionButton({innerStyles, style, ...props}: ButtonProps) {
     );
 }
 
+const CardDetailsActionButton = Object.assign(CardDetailsActionButtonBase, {
+    Icon: ButtonIcon,
+    Text: ButtonText,
+    KeyboardShortcut: ButtonKeyboardShortcut,
+});
+
 export default CardDetailsActionButtons;
 export {CardDetailsActionButton};
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
index d8b620e216fd..38d8605328d8 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
+++ b/src/pages/settings/Wallet/ExpensifyCardPage/index.tsx
@@ -342,13 +342,13 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
                         }
                     >
                         <CardDetailsActionButton
-                            medium
-                            text={translate('workspace.common.viewTransactions')}
-                            icon={expensifyIcons.MoneySearch}
                             onPress={navigateToTransactions}
                             innerStyles={styles.ph2}
                             style={styles.w100}
-                        />
+                        >
+                            <CardDetailsActionButton.Icon src={expensifyIcons.MoneySearch} />
+                            <CardDetailsActionButton.Text>{translate('workspace.common.viewTransactions')}</CardDetailsActionButton.Text>
+                        </CardDetailsActionButton>
                     </FrozenCardHeader>
                 ) : (
                     <View style={[styles.flex1, styles.mb3, styles.mt8]}>
@@ -385,19 +385,21 @@ function ExpensifyCardPage({route}: ExpensifyCardPageProps) {
                             <CardDetailsActionButtons style={styles.mb0}>
                                 {canManageCardFreeze && currentCard?.state === CONST.EXPENSIFY_CARD.STATE.OPEN && !isCardFrozen(currentCard) && (
                                     <CardDetailsActionButton
-                                        text={translate('cardPage.freezeCard')}
-                                        icon={expensifyIcons.FreezeCard}
                                         onPress={handleFreezePress}
                                         isDisabled={isOffline}
                                         style={styles.flexShrink0}
-                                    />
+                                    >
+                                        <CardDetailsActionButton.Icon src={expensifyIcons.FreezeCard} />
+                                        <CardDetailsActionButton.Text>{translate('cardPage.freezeCard')}</CardDetailsActionButton.Text>
+                                    </CardDetailsActionButton>
                                 )}
                                 <CardDetailsActionButton
-                                    text={translate('workspace.common.viewTransactions')}
-                                    icon={expensifyIcons.MoneySearch}
                                     onPress={navigateToTransactions}
                                     style={styles.flexShrink0}
-                                />
+                                >
+                                    <CardDetailsActionButton.Icon src={expensifyIcons.MoneySearch} />
+                                    <CardDetailsActionButton.Text>{translate('workspace.common.viewTransactions')}</CardDetailsActionButton.Text>
+                                </CardDetailsActionButton>
                             </CardDetailsActionButtons>
                         )}
                         {shouldShowChangePINRow && isCardPINBlocked && (
diff --git a/src/pages/settings/Wallet/PersonalCardDetailsPage.tsx b/src/pages/settings/Wallet/PersonalCardDetailsPage.tsx
index 7ee5627d136c..3d92fbc26804 100644
--- a/src/pages/settings/Wallet/PersonalCardDetailsPage.tsx
+++ b/src/pages/settings/Wallet/PersonalCardDetailsPage.tsx
@@ -217,20 +217,22 @@ function PersonalCardDetailsPage({route}: PersonalCardDetailsPageProps) {
                     <CardDetailsActionButtons style={styles.mb0}>
                         {!isCSVImportedPersonalCard && (
                             <CardDetailsActionButton
-                                text={translate('workspace.moreFeatures.companyCards.updateCard')}
-                                icon={expensifyIcons.Sync}
                                 onPress={updateCard}
                                 isDisabled={isOffline || card?.isLoadingLastUpdated}
                                 isLoading={card?.isLoadingLastUpdated}
                                 style={styles.flexShrink0}
-                            />
+                            >
+                                <CardDetailsActionButton.Icon src={expensifyIcons.Sync} />
+                                <CardDetailsActionButton.Text>{translate('workspace.moreFeatures.companyCards.updateCard')}</CardDetailsActionButton.Text>
+                            </CardDetailsActionButton>
                         )}
                         <CardDetailsActionButton
-                            text={translate('workspace.common.viewTransactions')}
-                            icon={expensifyIcons.MoneySearch}
                             onPress={navigateToTransactions}
                             style={styles.flexShrink0}
-                        />
+                        >
+                            <CardDetailsActionButton.Icon src={expensifyIcons.MoneySearch} />
+                            <CardDetailsActionButton.Text>{translate('workspace.common.viewTransactions')}</CardDetailsActionButton.Text>
+                        </CardDetailsActionButton>
                     </CardDetailsActionButtons>
                 </OfflineWithFeedback>
                 {isCardBroken && (
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 413533f4af5c..abfb7c05ab04 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -1,5 +1,5 @@
 import ActivityIndicator from '@components/ActivityIndicator';
-import Button from '@components/Button';
+import Button from '@components/ButtonComposed';
 import type {TableHandle} from '@components/Table';
 import type {WorkspaceRowData, WorkspaceTableColumnKey} from '@components/Tables/WorkspaceListTable';
 import WorkspaceListTable from '@components/Tables/WorkspaceListTable';
@@ -214,13 +214,14 @@ function WorkspacesListPage() {
 
     const headerButton = !isRestrictedPolicyCreation && !!workspaceRows.length && (
         <Button
-            success
+            variant={CONST.BUTTON_VARIANT.SUCCESS}
             accessibilityLabel={translate('common.new')}
-            text={translate('common.new')}
             sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.NEW_WORKSPACE_BUTTON}
             onPress={() => interceptAnonymousUser(() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_CONFIRMATION.path, ROUTES.WORKSPACES_LIST.route)))}
-            icon={icons.Plus}
-        />
+        >
+            <Button.Icon src={icons.Plus} />
+            <Button.Text>{translate('common.new')}</Button.Text>
+        </Button>
     );
 
     const onBackButtonPress = () => {
diff --git a/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx
index 6e9b20717e8e..95aa615c551b 100644
--- a/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx
+++ b/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx
@@ -216,20 +216,22 @@ function DynamicWorkspaceCompanyCardDetailsPage({route}: DynamicWorkspaceCompany
                         <CardDetailsActionButtons>
                             {canWriteCompanyCards && (
                                 <CardDetailsActionButton
-                                    text={translate('workspace.moreFeatures.companyCards.updateCard')}
-                                    icon={expensifyIcons.Sync}
                                     onPress={updateCard}
                                     isDisabled={isOffline || card?.isLoadingLastUpdated}
                                     isLoading={card?.isLoadingLastUpdated}
                                     style={styles.flexShrink0}
-                                />
+                                >
+                                    <CardDetailsActionButton.Icon src={expensifyIcons.Sync} />
+                                    <CardDetailsActionButton.Text>{translate('workspace.moreFeatures.companyCards.updateCard')}</CardDetailsActionButton.Text>
+                                </CardDetailsActionButton>
                             )}
                             <CardDetailsActionButton
-                                text={translate('workspace.common.viewTransactions')}
-                                icon={expensifyIcons.MoneySearch}
                                 onPress={navigateToTransactions}
                                 style={styles.flexShrink0}
-                            />
+                            >
+                                <CardDetailsActionButton.Icon src={expensifyIcons.MoneySearch} />
+                                <CardDetailsActionButton.Text>{translate('workspace.common.viewTransactions')}</CardDetailsActionButton.Text>
+                            </CardDetailsActionButton>
                         </CardDetailsActionButtons>
                     </OfflineWithFeedback>
                     <OfflineWithFeedback
diff --git a/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx
index 15daf81cfd70..1a14bfa2346e 100644
--- a/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx
+++ b/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx
@@ -356,13 +356,13 @@ function DynamicWorkspaceExpensifyCardDetailsPage({route}: DynamicWorkspaceExpen
                             onAskToUnfreezePress={() => {}}
                         >
                             <CardDetailsActionButton
-                                medium
-                                text={translate('workspace.common.viewTransactions')}
-                                icon={expensifyIcons.MoneySearch}
                                 onPress={navigateToTransactions}
                                 innerStyles={styles.ph2}
                                 style={styles.w100}
-                            />
+                            >
+                                <CardDetailsActionButton.Icon src={expensifyIcons.MoneySearch} />
+                                <CardDetailsActionButton.Text>{translate('workspace.common.viewTransactions')}</CardDetailsActionButton.Text>
+                            </CardDetailsActionButton>
                         </FrozenCardHeader>
                     ) : (
                         <View style={[styles.walletCard, styles.mb3, styles.mt8]}>{workspaceCardImage}</View>
@@ -371,17 +371,17 @@ function DynamicWorkspaceExpensifyCardDetailsPage({route}: DynamicWorkspaceExpen
                         <CardDetailsActionButtons>
                             {canManageCardFreeze && isCardOpen && !isCardFrozen(card) && (
                                 <CardDetailsActionButton
-                                    text={translate('cardPage.freezeCard')}
-                                    icon={expensifyIcons.FreezeCard}
                                     onPress={handleFreezePress}
                                     isDisabled={isOffline}
-                                />
+                                >
+                                    <CardDetailsActionButton.Icon src={expensifyIcons.FreezeCard} />
+                                    <CardDetailsActionButton.Text>{translate('cardPage.freezeCard')}</CardDetailsActionButton.Text>
+                                </CardDetailsActionButton>
                             )}
-                            <CardDetailsActionButton
-                                text={translate('workspace.common.viewTransactions')}
-                                icon={expensifyIcons.MoneySearch}
-                                onPress={navigateToTransactions}
-                            />
+                            <CardDetailsActionButton onPress={navigateToTransactions}>
+                                <CardDetailsActionButton.Icon src={expensifyIcons.MoneySearch} />
+                                <CardDetailsActionButton.Text>{translate('workspace.common.viewTransactions')}</CardDetailsActionButton.Text>
+                            </CardDetailsActionButton>
                         </CardDetailsActionButtons>
                     )}