From 561370d1bb3dfe2737a4ba76a81c2e393b911f96 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Mon, 12 Jan 2026 15:48:16 +0100
Subject: [PATCH] refactor(ui): migrate Button to use useDefinition hook

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 packages/ui/src/components/Button/Button.tsx | 37 +++++---------------
 1 file changed, 8 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index fcacf7c22d..069c8632e0 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { forwardRef, Ref } from 'react';
 import { Button as RAButton, ProgressBar } from 'react-aria-components';
 import { RiLoader4Line } from '@remixicon/react';
 import type { ButtonProps } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { ButtonDefinition } from './definition';
-import styles from './Button.module.css';
-import { useSurface } from '../../hooks/useSurface';
 
 /**
  * A button component built on React Aria Components that provides accessible
@@ -56,41 +53,23 @@ import { useSurface } from '../../hooks/useSurface';
  */
 export const Button = forwardRef(
   (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles(
+    const { ownProps, restProps, dataAttributes } = useDefinition(
       ButtonDefinition,
-      {
-        size: 'small',
-        variant: 'primary',
-        ...props,
-      },
+      props,
     );
-
-    const {
-      children,
-      className,
-      iconStart,
-      iconEnd,
-      loading,
-      onSurface,
-      ...rest
-    } = cleanedProps;
-
-    const { surface } = useSurface({ onSurface });
+    const { classes, iconStart, iconEnd, loading, children } = ownProps;
 
     return (
       <RAButton
-        className={clsx(classNames.root, styles[classNames.root], className)}
+        className={classes.root}
         ref={ref}
         isPending={loading}
         {...dataAttributes}
-        {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}
-        {...rest}
+        {...restProps}
       >
         {({ isPending }) => (
           <>
-            <span
-              className={clsx(classNames.content, styles[classNames.content])}
-            >
+            <span className={classes.content}>
               {iconStart}
               {children}
               {iconEnd}
@@ -100,7 +79,7 @@ export const Button = forwardRef(
               <ProgressBar
                 aria-label="Loading"
                 isIndeterminate
-                className={clsx(classNames.spinner, styles[classNames.spinner])}
+                className={classes.spinner}
               >
                 <RiLoader4Line aria-hidden="true" />
               </ProgressBar>