fix: Apply primary button styles for icon button #2121 (#2137)

h2oai · Jan 15, 2024 · 70cbdbe · 70cbdbe
1 parent 8338cd6
commit 70cbdbe
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/ui/src/button.tsx b/ui/src/button.tsx
@@ -171,7 +171,11 @@ const
       } : undefined,
       split: !!commands,
     }
-    if (isIconOnly) return <Fluent.IconButton {...btnProps} data-test={name} title={caption} />
+    if (isIconOnly) {
+      return primary
+        ? <Fluent.PrimaryButton {...btnProps} data-test={name} title={caption} />
+        : <Fluent.IconButton {...btnProps} data-test={name} title={caption} />
+    }
 
     return caption?.length
       ? primary

diff --git a/website/widgets/form/button.md b/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.