Add isIconOnly to Button.jsx

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>
   );

webui/src/common/components/Button/styles.sass

@@ -70,6 +70,20 @@
     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
   align-items: center