chore: use primary button instead of styles change #2121

ui/src/button.tsx

@@ -115,11 +115,6 @@ const
     center: 'center',
     between: 'space-between',
     around: 'space-around',
-  },
-  iconButtonPrimaryStyles = {
-    root: { color: cssVar('$white'), background: cssVar('$themePrimary') },
-    rootHovered: { color: cssVar('$white'), background: cssVar('$themeDarkAlt') },
-    rootPressed: { color: cssVar('$white'), background: cssVar('$themePrimary') }
   }
 
 const
@@ -177,21 +172,11 @@ const
       split: !!commands,
     }
     if (isIconOnly) {
-      return <Fluent.IconButton
-        {...btnProps}
-        data-test={name}
-        title={caption}
-        // Fluent does not support primary icon buttons so we need to override the styles.
-        styles={primary
-          ? {
-            ...styles,
-            ...iconButtonPrimaryStyles,
-            root: { ...(styles.root as any), ...iconButtonPrimaryStyles.root }
-          }
-          : undefined
-        }
-      />
+      return primary
+        ? <Fluent.PrimaryButton {...btnProps} data-test={name} title={caption} />
+        : <Fluent.IconButton {...btnProps} data-test={name} title={caption} />
     }
+
     return caption?.length
       ? primary
         ? <Fluent.CompoundButton {...btnProps} data-test={name} primary secondaryText={caption} />

website/widgets/form/button.md

@@ -63,6 +63,14 @@ q.page['form'] = ui.form_card(box='1 1 1 1', items=[
 ])
 ```
 
+You can also use the icon only button as a [primary button](#primary-button).
+
+```py
+q.page['form'] = ui.form_card(box='1 1 1 1', items=[
+    ui.button(name='button', icon='ChevronRight', caption='Tooltip on hover', primary=True)
+])
+```
+
 ## Button layout
 
 Buttons on their own can only be placed in a [form_card](/docs/api/ui#form_card), either vertically or horizontally.