Add interactive=False mode to gr.Button (#3266)

* add interactive=False to button

* add interactive=True by default

* changelog

* fix frontend

* fix backend test

* formatting

* review changes

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## New Features:
 - Updated image upload component to accept all image formats, including lossless formats like .webp by [@fienestar](https://github.com/fienestar) in [PR 3225](https://github.com/gradio-app/gradio/pull/3225)
+- Adds a disabled mode to the `gr.Button` component by setting `interactive=False` by [@abidlabs](https://github.com/abidlabs) in [PR 3266](https://github.com/gradio-app/gradio/pull/3266)
+
 
 ## Bug Fixes:
 - Ensure `mirror_webcam` is always respected by [@pngwn](https://github.com/pngwn) in [PR 3245](https://github.com/gradio-app/gradio/pull/3245)

gradio/components.py

@@ -2909,6 +2909,7 @@ class Button(Clickable, IOComponent, SimpleSerializable):
         *,
         variant: str = "secondary",
         visible: bool = True,
+        interactive: bool = True,
         elem_id: str | None = None,
         **kwargs,
     ):
@@ -2920,7 +2921,12 @@ class Button(Clickable, IOComponent, SimpleSerializable):
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
         IOComponent.__init__(
-            self, visible=visible, elem_id=elem_id, value=value, **kwargs
+            self,
+            visible=visible,
+            elem_id=elem_id,
+            value=value,
+            interactive=interactive,
+            **kwargs,
         )
         self.variant = variant
 
@@ -2928,6 +2934,7 @@ class Button(Clickable, IOComponent, SimpleSerializable):
         return {
             "value": self.value,
             "variant": self.variant,
+            "interactive": self.interactive,
             **Component.get_config(self),
         }
 
@@ -2936,11 +2943,13 @@ class Button(Clickable, IOComponent, SimpleSerializable):
         value: str | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
         variant: str | None = None,
         visible: bool | None = None,
+        interactive: bool | None = None,
     ):
         return {
             "variant": variant,
             "visible": visible,
             "value": value,
+            "interactive": interactive,
             "__type__": "update",
         }
 

gradio/test_data/blocks_configs.py

@@ -68,6 +68,7 @@ XRAY_CONFIG = {
             "props": {
                 "value": "Run",
                 "variant": "secondary",
+                "interactive": True,
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -115,6 +116,7 @@ XRAY_CONFIG = {
                 "value": "Run",
                 "variant": "secondary",
                 "name": "button",
+                "interactive": True,
                 "visible": True,
                 "style": {},
             },
@@ -301,6 +303,7 @@ XRAY_CONFIG_DIFF_IDS = {
             "props": {
                 "value": "Run",
                 "variant": "secondary",
+                "interactive": True,
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -347,6 +350,7 @@ XRAY_CONFIG_DIFF_IDS = {
             "props": {
                 "value": "Run",
                 "variant": "secondary",
+                "interactive": True,
                 "name": "button",
                 "visible": True,
                 "style": {},
@@ -538,6 +542,7 @@ XRAY_CONFIG_WITH_MISTAKE = {
             "props": {
                 "value": "Run",
                 "name": "button",
+                "interactive": True,
                 "css": {"background-color": "red", "--hover-color": "orange"},
                 "variant": "secondary",
             },
@@ -583,6 +588,7 @@ XRAY_CONFIG_WITH_MISTAKE = {
             "type": "button",
             "props": {
                 "value": "Run",
+                "interactive": True,
                 "name": "button",
                 "style": {},
                 "variant": "secondary",

ui/packages/app/src/components/Button/Button.svelte

@@ -8,8 +8,16 @@
 	export let visible: boolean = true;
 	export let value: string;
 	export let variant: "primary" | "secondary" = "primary";
+	export let mode: "static" | "dynamic" = "dynamic";
 </script>
 
-<Button {variant} {elem_id} {style} {visible} on:click>
+<Button
+	{variant}
+	{elem_id}
+	{style}
+	{visible}
+	disabled={mode === "static"}
+	on:click
+>
 	{$_(value)}
 </Button>

ui/packages/app/src/components/Button/index.ts

@@ -1,5 +1,5 @@
 export { default as Component } from "./Button.svelte";
-export const modes = ["static"];
+export const modes = ["static", "dynamic"];
 
 export const document = (config: Record<string, any>) => ({
 	type: "string",

ui/packages/button/src/Button.svelte

@@ -7,6 +7,7 @@
 	export let visible: boolean = true;
 	export let variant: "primary" | "secondary" | "stop" | "plain" = "secondary";
 	export let size: "sm" | "lg" = "lg";
+	export let disabled: boolean = false;
 
 	$: ({ styles } = get_styles(style, ["full_width"]));
 </script>
@@ -17,6 +18,7 @@
 	class="{size} {variant}"
 	style={styles}
 	id={elem_id}
+	{disabled}
 >
 	<slot />
 </button>
@@ -31,10 +33,15 @@
 		text-align: center;
 	}
 
-	button:hover {
+	button:hover,
+	button[disabled] {
 		box-shadow: var(--shadow-drop-lg);
 	}
 
+	button[disabled] {
+		cursor: not-allowed;
+	}
+
 	.hide {
 		display: none;
 	}
@@ -45,7 +52,8 @@
 		color: var(--button-plain-text-color-base);
 	}
 
-	.plain:hover {
+	.plain:hover,
+	.plain[disabled] {
 		border: 1px solid var(--button-plain-border-color-hover);
 		background: var(--button-plain-background-hover);
 		color: var(--button-plain-text-color-hover);
@@ -60,7 +68,8 @@
 		background: var(--button-primary-background-base);
 		color: var(--button-primary-text-color-base);
 	}
-	.primary:hover {
+	.primary:hover,
+	.primary[disabled] {
 		border-color: var(--button-primary-border-color-hover);
 		background: var(--button-primary-background-hover);
 		color: var(--button-primary-text-color-hover);
@@ -78,7 +87,8 @@
 		color: var(--button-secondary-text-color-base);
 	}
 
-	.secondary:hover {
+	.secondary:hover,
+	.secondary[disabled] {
 		border-color: var(--button-secondary-border-color-hover);
 		background: var(--button-secondary-background-hover);
 		color: var(--button-secondary-text-color-hover);
@@ -96,7 +106,8 @@
 		color: var(--button-cancel-text-color-base);
 	}
 
-	.stop:hover {
+	.stop:hover,
+	.stop[disabled] {
 		border-color: var(--button-cancel-border-color-hover);
 		background: var(--button-cancel-background-hover);
 		color: var(--button-cancel-text-color-hover);