diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index 5472e94607..97e9ec8fe5 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -17,8 +17,7 @@
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import clsx from 'clsx';
-import { extractProps } from '../../utils/extractProps';
-import { buttonPropDefs } from './Button.props';
+import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
 import type { ButtonProps } from './types';
 
@@ -32,16 +31,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       iconStart,
       iconEnd,
       children,
+      className,
+      style,
       ...rest
     } = props;
 
-    const { className, style } = extractProps(props, buttonPropDefs);
+    // Get the responsive value for the variant
+    const responsiveSize = useResponsiveValue(size);
+    const responsiveVariant = useResponsiveValue(variant);
 
     return (
       <button
         ref={ref}
         disabled={disabled}
-        className={clsx('canon-Button', className)}
+        className={clsx(
+          'canon-Button',
+          `canon-Button--size-${responsiveSize}`,
+          `canon-Button--variant-${responsiveVariant}`,
+          className,
+        )}
         style={style}
         {...rest}
       >