Refactor MediaReplaceFlow to support dynamic button variants and upda…

…te BackgroundImageControls to specify button variant

packages/block-editor/src/components/background-image-control/index.js

@@ -378,6 +378,7 @@ function BackgroundImageControls( {
 					/>
 				}
 				variant="secondary"
+				buttonVariant="button"
 				onError={ onUploadError }
 				onReset={ () => {
 					closeAndFocus();

packages/block-editor/src/components/media-replace-flow/index.js

@@ -15,6 +15,7 @@ import {
 	MenuItem,
 	Dropdown,
 	withFilters,
+	ToolbarButton,
 	Button,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
@@ -37,6 +38,13 @@ import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
+
+const BUTTON_VARIANTS = {
+	default: ToolbarButton,
+	toolbar: ToolbarButton,
+	button: Button,
+};
+
 let uniqueId = 0;
 
 const MediaReplaceFlow = ( {
@@ -60,6 +68,7 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 	popoverProps,
+	buttonVariant = 'default',
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
@@ -136,22 +145,23 @@ const MediaReplaceFlow = ( {
 	};
 
 	const gallery = multiple && onlyAllowsImages();
+	const ButtonComponent = BUTTON_VARIANTS[ buttonVariant ];
 
 	return (
 		<Dropdown
 			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					__next40pxDefaultSize
+				<ButtonComponent
+					__next40pxDefaultSize={ buttonVariant === 'button' }
 					ref={ editMediaButtonRef }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
 					onKeyDown={ openOnArrowDown }
 				>
 					{ name }
-				</Button>
+				</ButtonComponent>
 			) }
 			renderContent={ ( { onClose } ) => (
 				<>