From 8d97de06fd4054c4e231716729ce5648a9fa85de Mon Sep 17 00:00:00 2001
From: Mathias Wagner <m.wagner@itlsoftware.de>
Date: Tue, 9 Sep 2025 13:31:19 +0200
Subject: [PATCH] Add isIconOnly to Button.jsx

---
 webui/src/common/components/Button/Button.jsx  |  5 ++++-
 webui/src/common/components/Button/styles.sass | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/webui/src/common/components/Button/Button.jsx b/webui/src/common/components/Button/Button.jsx
index 03be7e3..2c19774 100644
--- a/webui/src/common/components/Button/Button.jsx
+++ b/webui/src/common/components/Button/Button.jsx
@@ -16,6 +16,8 @@ export const Button = ({
   ...rest
 }) => {
   const isDisabled = disabled || loading;
+  const isIconOnly = (icon || iconRight) && !children;
+  
   return (
     <Component
       className={cn(
@@ -24,6 +26,7 @@ export const Button = ({
         `btn--${size}`,
         full && "btn--full",
         loading && "is-loading",
+        isIconOnly && "btn--icon-only",
         className
       )}
       disabled={isDisabled}
@@ -31,7 +34,7 @@ export const Button = ({
     >
       {loading && <span className="btn-spinner" aria-hidden />}
       {icon && <span className="btn-icon btn-icon--left">{icon}</span>}
-      <span className="btn-label">{children}</span>
+      {children && <span className="btn-label">{children}</span>}
       {iconRight && <span className="btn-icon btn-icon--right">{iconRight}</span>}
     </Component>
   );
diff --git a/webui/src/common/components/Button/styles.sass b/webui/src/common/components/Button/styles.sass
index e7bf5c6..83493cb 100644
--- a/webui/src/common/components/Button/styles.sass
+++ b/webui/src/common/components/Button/styles.sass
@@ -69,6 +69,20 @@
     --c-text: #ffffff
     background: var(--c-bg)
     border-color: var(--c-border)
+  
+  &.btn--icon-only
+    padding: 0.75rem
+    aspect-ratio: 1
+    justify-content: center
+    
+    &.btn--sm
+      padding: 0.6rem
+    
+    &.btn--lg
+      padding: 0.9rem
+    
+    .btn-icon
+      margin: 0
 
 .btn-icon
   display: inline-flex