Button options

src/lib/components/BlockContainer.svelte

@@ -42,6 +42,8 @@
      children = layoutState.updateChildren(container, evt.detail.items)
      // Ensure dragging is stopped on drag finish
  };
+
+ const tt = "asd\nasdlkj"
 </script>
 
 {#if container && children}

src/lib/stores/layoutState.ts

@@ -93,10 +93,7 @@ export type LayoutState = {
 }
 
 /**
- * Attributes for both containers and nodes, or containers only.
+ * Attributes for both containers and nodes.
- * If the attribute can be applicable to both, then it should go here.
- * If it only applies to a container it should go here too.
- * If it only applies to a node it should be placed in its LGraphNode.properties (nodeProps) instead.
  **/
 export type Attributes = {
     /*
@@ -134,6 +131,11 @@ export type Attributes = {
      */
     disabled?: boolean,
 
+    /*
+     * CSS height
+     */
+    height?: string,
+
     /*
      * CSS Flex grow
      */
@@ -145,12 +147,16 @@ export type Attributes = {
      */
     variant?: string,
 
-    /*************************************/
+    /*********************************************/
-    /* Special attributes for containers */
+    /* Special attributes for widgets/containers */
-    /*************************************/
+    /*********************************************/
 
     // Accordion
     openOnStartup?: boolean
+
+    // Button
+    buttonVariant?: "primary" | "secondary",
+    buttonSize?: "large" | "small"
 }
 
 export type AttributesSpec = {
@@ -330,6 +336,26 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 defaultValue: false,
                 canShow: (di: IDragItem) => di.type === "container" && di.attrs.variant === "accordion"
             },
+
+            // Button
+            {
+                name: "buttonVariant",
+                type: "enum",
+                location: "widget",
+                editable: true,
+                validNodeTypes: ["ui/button"],
+                values: ["primary", "secondary"],
+                defaultValue: "primary"
+            },
+            {
+                name: "buttonSize",
+                type: "enum",
+                location: "widget",
+                editable: true,
+                validNodeTypes: ["ui/button"],
+                values: ["large", "small"],
+                defaultValue: "large"
+            },
         ]
     },
     {

src/lib/widgets/ButtonWidget.svelte

@@ -3,11 +3,11 @@
  import type { ComfySliderNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { Button } from "@gradio/button";
- import { get, type Writable } from "svelte/store";
+ import { get, type Writable, writable } from "svelte/store";
  export let widget: WidgetLayout | null = null;
  let node: ComfyButtonNode | null = null;
  let nodeValue: Writable<boolean> | null = null;
- let propsChanged: Writable<number> | null = null;
+ let attrsChanged: Writable<boolean> | null = null;
 
  $: widget && setNodeValue(widget);
 
@@ -15,7 +15,7 @@
      if (widget) {
          node = widget.node as ComfyButtonNode
          nodeValue = node.value;
-         propsChanged = node.propsChanged;
+         attrsChanged = widget.attrsChanged;
      }
  };
 
@@ -24,20 +24,23 @@
  }
 
  const style = {
-     full_width: "100%"
+     full_width: "100%",
  }
 </script>
 
 <div class="wrapper gradio-button">
-    {#if node !== null}
+    {#key $attrsChanged}
-        <Button
+        {#if node !== null}
-            disabled={widget.attrs.disabled}
+            <Button
-            on:click={onClick}
+                disabled={widget.attrs.disabled}
-            variant="primary"
+                on:click={onClick}
-            {style}>
+                variant={widget.attrs.buttonVariant || "primary"}
-            {widget.attrs.title}
+                size={widget.attrs.buttonSize === "small" ? "sm" : "lg"}
-        </Button>
+                {style}>
-    {/if}
+                {widget.attrs.title}
+            </Button>
+        {/if}
+    {/key}
 </div>
 
 <style lang="scss">