diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/block.js b/assets/js/atomic/blocks/product-elements/sale-badge/block.js
index d9e9041ee37..aaa7281ec51 100644
--- a/assets/js/atomic/blocks/product-elements/sale-badge/block.js
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/block.js
@@ -15,6 +15,11 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
+import {
+	useBorderProps,
+	useColorProps,
+	useSpacingProps,
+} from '../../../../hooks/style-attributes';
 
 /**
  * Product Sale Badge Block Component.
@@ -24,9 +29,14 @@ import './style.scss';
  * @param {string} [props.align]     Alignment of the badge.
  * @return {*} The component.
  */
-const Block = ( { className, align } ) => {
+const Block = ( props ) => {
+	const { className, align } = props;
+
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
+	const borderProps = useBorderProps( props );
+	const colorProps = useColorProps( props );
+	const spacingProps = useSpacingProps( props );
 
 	if ( ! product.id || ! product.on_sale ) {
 		return null;
@@ -45,8 +55,15 @@ const Block = ( { className, align } ) => {
 				alignClass,
 				{
 					[ `${ parentClassName }__product-onsale` ]: parentClassName,
-				}
+				},
+				borderProps.className,
+				colorProps.className
 			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...spacingProps.style,
+			} }
 		>
 			<Label
 				label={ __( 'Sale', 'woo-gutenberg-products-block' ) }
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/edit.js b/assets/js/atomic/blocks/product-elements/sale-badge/edit.js
index fd8621a6d2e..e1ec154b031 100644
--- a/assets/js/atomic/blocks/product-elements/sale-badge/edit.js
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/edit.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -9,9 +10,15 @@ import { __ } from '@wordpress/i18n';
 import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import './editor.scss';
 
 const Edit = ( { attributes } ) => {
-	return <Block { ...attributes } />;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block { ...attributes } />
+		</div>
+	);
 };
 
 export default withProductSelector( {
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/editor.scss b/assets/js/atomic/blocks/product-elements/sale-badge/editor.scss
new file mode 100644
index 00000000000..6905d3197a1
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/editor.scss
@@ -0,0 +1,4 @@
+.wp-block-woocommerce-product-sale-badge {
+	border-style: none !important;
+	// background-color: transparent !important;
+}
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/index.js b/assets/js/atomic/blocks/product-elements/sale-badge/index.js
index 5a42b888a9f..4f5c9ce9349 100644
--- a/assets/js/atomic/blocks/product-elements/sale-badge/index.js
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/index.js
@@ -14,16 +14,38 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
+import { Save } from './save';
 
 const blockConfig = {
+	apiVersion: 2,
 	title,
 	description,
 	icon: { src: icon },
 	supports: {
 		html: false,
+		color: {
+			gradients: true,
+			background: true,
+			link: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+		},
+		spacing: {
+			padding: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-sale-badge',
 	},
 	attributes,
 	edit,
+	save: Save,
 };
 
 registerBlockType( 'woocommerce/product-sale-badge', {
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/save.tsx b/assets/js/atomic/blocks/product-elements/sale-badge/save.tsx
new file mode 100644
index 00000000000..03a720e27df
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/save.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import classnames from 'classnames';
+
+type Props = {
+	attributes: Record< string, unknown > & {
+		className?: string;
+	};
+};
+
+export const Save = ( { attributes }: Props ): JSX.Element => {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( 'is-loading', attributes.className ),
+			} ) }
+		/>
+	);
+};
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/style.scss b/assets/js/atomic/blocks/product-elements/sale-badge/style.scss
index f1ce4d3f1d2..f99235ee8e0 100644
--- a/assets/js/atomic/blocks/product-elements/sale-badge/style.scss
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/style.scss
@@ -4,10 +4,11 @@
 	padding: em($gap-smallest) em($gap-small);
 	display: inline-block;
 	width: auto;
+	border-style: solid;
 	border: 1px solid #43454b;
-	border-radius: 3px;
-	color: #43454b;
-	background: #fff;
+	border-radius: inherit;
+	color: inherit;
+	background: inherit;
 	text-align: center;
 	text-transform: uppercase;
 	font-weight: 600;