From 06c4cd705fb2468c863662266d8147cad55cad3f Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Wed, 22 Feb 2023 13:23:38 -0600
Subject: [PATCH] Some fixes to disabled buttons (#3288)

* Fixes to button disable

* button

* formatting

* fixes

* formatter
---
 CHANGELOG.md                         | 2 +-
 gradio/components.py                 | 4 ++--
 gradio/utils.py                      | 4 ++--
 ui/packages/button/src/Button.svelte | 2 ++
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6e15fdc98..21eaa2cea1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## 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)
+- 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) and [PR 3288](https://github.com/gradio-app/gradio/pull/3288)
 
 
 ## Bug Fixes:
diff --git a/gradio/components.py b/gradio/components.py
index a6cfffaab2..afd71a988f 100644
--- a/gradio/components.py
+++ b/gradio/components.py
@@ -2945,13 +2945,13 @@ class Button(Clickable, IOComponent, SimpleSerializable):
         visible: bool | None = None,
         interactive: bool | None = None,
     ):
-        return {
+        updated_config = {
             "variant": variant,
             "visible": visible,
             "value": value,
-            "interactive": interactive,
             "__type__": "update",
         }
+        return IOComponent.add_interactive_to_config(updated_config, interactive)
 
     def style(self, *, full_width: bool | None = None, **kwargs):
         """
diff --git a/gradio/utils.py b/gradio/utils.py
index d818f376b4..e4b3c9debb 100644
--- a/gradio/utils.py
+++ b/gradio/utils.py
@@ -886,8 +886,8 @@ def tex2svg(formula, *args):
     svg_start = xml_code.index("<svg ")
     svg_code = xml_code[svg_start:]
     svg_code = re.sub(r"<metadata>.*<\/metadata>", "", svg_code, flags=re.DOTALL)
-    svg_code = re.sub(r' width="[^"]+"', '', svg_code)
-    svg_code = re.sub(r' height="[^"]+"', '', svg_code)
+    svg_code = re.sub(r' width="[^"]+"', "", svg_code)
+    svg_code = re.sub(r' height="[^"]+"', "", svg_code)
     copy_code = f"<span style='font-size: 0px'>{formula}</span>"
     return f"{copy_code}{svg_code}"
 
diff --git a/ui/packages/button/src/Button.svelte b/ui/packages/button/src/Button.svelte
index a2d6b81251..e12884d4d4 100644
--- a/ui/packages/button/src/Button.svelte
+++ b/ui/packages/button/src/Button.svelte
@@ -39,6 +39,8 @@
 	}
 
 	button[disabled] {
+		opacity: 0.5;
+		filter: grayscale(30%);
 		cursor: not-allowed;
 	}