diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 29a17c8be87e44..00f5c0df46372a 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -157,7 +157,7 @@ const BorderControlDropdown = (
onStyleChange,
popoverContentClassName,
popoverControlsClassName,
- clearButtonClassName,
+ resetButtonClassName,
size,
__unstablePopoverProps,
...otherProps
@@ -222,7 +222,7 @@ const BorderControlDropdown = (
/>
) }
-
+
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index 858f0b0c77b197..5366babc266c61 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -76,8 +76,8 @@ export function useBorderControlDropdown(
return cx( styles.borderControlPopoverContent );
}, [ cx ] );
- const clearButtonClassName = useMemo( () => {
- return cx( styles.clearButton );
+ const resetButtonClassName = useMemo( () => {
+ return cx( styles.resetButton );
}, [ cx ] );
return {
@@ -94,7 +94,7 @@ export function useBorderControlDropdown(
onReset,
popoverContentClassName,
popoverControlsClassName,
- clearButtonClassName,
+ resetButtonClassName,
size,
__experimentalIsRenderedInSidebar,
};
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index da2107fc73a93e..f06472afb7cff9 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -147,7 +147,7 @@ export const borderControlPopoverControls = css`
export const borderControlPopoverContent = css``;
export const borderColorIndicator = css``;
-export const clearButton = css`
+export const resetButton = css`
display: flex;
justify-content: flex-end;
margin-top: 12px;
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index 9170a47f64feeb..6864a1add1fffc 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -146,7 +146,7 @@ describe( 'BorderControl', () => {
const solidButton = getButton( 'Solid' );
const dashedButton = getButton( 'Dashed' );
const dottedButton = getButton( 'Dotted' );
- const clearButton = getButton( 'Clear' );
+ const resetButton = getButton( 'Reset' );
expect( customColorPicker ).toBeInTheDocument();
expect( colorSwatchButtons.length ).toEqual( colors.length );
@@ -154,7 +154,7 @@ describe( 'BorderControl', () => {
expect( solidButton ).toBeInTheDocument();
expect( dashedButton ).toBeInTheDocument();
expect( dottedButton ).toBeInTheDocument();
- expect( clearButton ).toBeInTheDocument();
+ expect( resetButton ).toBeInTheDocument();
} );
it( 'should not render style options when opted out of', async () => {