diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index c0e2c5768..ada5adba6 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -21,9 +21,15 @@ const getHorizontalMargin = pipe(
   unless(isString, pxToRem),
 );
 
-const Spinner = styled.div.attrs({
+const Spinner = styled.div.attrs<SpinnerProps>((props) => ({
   className: cls(CLX_COMPONENT, 'spinner'),
-})<SpinnerProps>`
+  dark: props.dark ?? false,
+  width: props.width ?? 24,
+  height: props.height ?? 24,
+  verticalMargin: props.verticalMargin ?? 15,
+  horizontalMargin: props.horizontalMargin ?? 'auto',
+  borderWidth: props.borderWidth ?? 4,
+}))<SpinnerProps>`
   margin-top: ${({ verticalMargin }) => pxToRem(verticalMargin)};
   margin-bottom: ${({ verticalMargin }) => pxToRem(verticalMargin)};
   margin-left: ${getHorizontalMargin};
@@ -40,13 +46,4 @@ const Spinner = styled.div.attrs({
     getColor(dark ? 'neutral.800' : 'neutral.0', { theme })};
 `;
 
-Spinner.defaultProps = {
-  dark: false,
-  width: 24,
-  height: 24,
-  verticalMargin: 15,
-  horizontalMargin: 'auto',
-  borderWidth: 4,
-};
-
 export default Spinner;