From d64f2c72b70882f43ca45c761e40bbf3949979e5 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 18:15:29 +0200
Subject: [PATCH] ui/buttons: add support for low profile style

---
 apps/client/src/widgets/react/Button.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx
index ffdc6ddd2c..1aab2153e6 100644
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -18,7 +18,7 @@ export interface ButtonProps {
     keyboardShortcut?: string;
     /** Called when the button is clicked. If not set, the button will submit the form (if any). */
     onClick?: () => void;
-    primary?: boolean;
+    kind?: "primary" | "secondary" | "lowProfile";
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
     style?: CSSProperties;
@@ -26,15 +26,23 @@ export interface ButtonProps {
     title?: string;
 }
 
-const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
+const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, kind, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
     // Memoize classes array to prevent recreation
     const classes = useMemo(() => {
         const classList: string[] = ["btn"];
-        if (primary) {
-            classList.push("btn-primary");
-        } else {
-            classList.push("btn-secondary");
+        
+        switch(kind) {
+            case "primary":
+                classList.push("btn-primary");
+                break;
+            case "lowProfile":
+                classList.push("tn-low-profile");
+                break;
+            default:
+                classList.push("btn-secondary");
+                break;
         }
+        
         if (className) {
             classList.push(className);
         }
@@ -44,7 +52,7 @@ const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortc
             classList.push("btn-micro");
         }
         return classList.join(" ");
-    }, [primary, className, size]);
+    }, [kind, className, size]);
 
     // Memoize keyboard shortcut rendering
     const shortcutElements = useMemo(() => {