use secondary buttons in interface (gradio-app#1173)

* use secondary buttons in interface * fix tests
pcuenca · May 7, 2022 · b8fb0b4 · b8fb0b4
1 parent 7095ce7
commit b8fb0b4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/gradio/components.py b/gradio/components.py
@@ -2801,19 +2801,23 @@ def __init__(
         default_value: str = "",
         *,
         css: Optional[Dict] = None,
+        variant: str = "primary",
         **kwargs,
     ):
         """
         Parameters:
         default_value (str): Default value
         css (dict): optional css parameters for the component
+        variant (str): 'primary' for main call-to-action, 'secondary' for a more subdued style
         """
         Component.__init__(self, css=css, **kwargs)
         self.default_value = default_value
+        self.variant = variant
 
     def get_template_context(self):
         return {
             "default_value": self.default_value,
+            "variant": self.variant,
             **Component.get_template_context(self),
         }
 

diff --git a/gradio/interface.py b/gradio/interface.py
@@ -490,14 +490,14 @@ def clean_html(raw_html):
                                 self.InterfaceTypes.STANDARD,
                                 self.InterfaceTypes.INPUT_ONLY,
                             ]:
-                                clear_btn = Button("Clear")
+                                clear_btn = Button("Clear", variant="secondary")
                                 if not self.live:
                                     submit_btn = Button("Submit")
                             elif self.interface_type == self.InterfaceTypes.UNIFIED:
-                                clear_btn = Button("Clear")
+                                clear_btn = Button("Clear", variant="secondary")
                                 submit_btn = Button("Submit")
                                 if self.allow_flagging == "manual":
-                                    flag_btn = Button("Flag")
+                                    flag_btn = Button("Flag", variant="secondary")
                                     flag_btn.click(
                                         lambda *flag_data: self.flagging_callback.flag(
                                             flag_data
@@ -519,10 +519,10 @@ def clean_html(raw_html):
                             component.render()
                         with Row():
                             if self.interface_type == self.InterfaceTypes.OUTPUT_ONLY:
-                                clear_btn = Button("Clear")
+                                clear_btn = Button("Clear", variant="secondary")
                                 submit_btn = Button("Generate")
                             if self.allow_flagging == "manual":
-                                flag_btn = Button("Flag")
+                                flag_btn = Button("Flag", variant="secondary")
                                 flag_btn.click(
                                     lambda *flag_data: self.flagging_callback.flag(
                                         flag_data
@@ -533,7 +533,9 @@ def clean_html(raw_html):
                                     _preprocess=False,
                                 )
                             if self.interpretation:
-                                interpretation_btn = Button("Interpret")
+                                interpretation_btn = Button(
+                                    "Interpret", variant="secondary"
+                                )
             submit_fn = (
                 lambda *args: self.run_prediction(args)[0]
                 if len(self.output_components) == 1

diff --git a/gradio/test_data/blocks_configs.py b/gradio/test_data/blocks_configs.py
@@ -62,6 +62,7 @@
                 "default_value": "Run",
                 "name": "button",
                 "css": {"background-color": "red", "--hover-color": "orange"},
+                "variant": "primary",
             },
         },
         {
@@ -99,7 +100,12 @@
         {
             "id": 13,
             "type": "button",
-            "props": {"default_value": "Run", "name": "button", "css": {}},
+            "props": {
+                "default_value": "Run",
+                "name": "button",
+                "css": {},
+                "variant": "primary",
+            },
         },
         {
             "id": 14,
@@ -245,6 +251,7 @@
                 "default_value": "Run",
                 "name": "button",
                 "css": {"background-color": "red", "--hover-color": "orange"},
+                "variant": "primary",
             },
         },
         {
@@ -290,6 +297,7 @@
                 "default_value": "Run",
                 "name": "button",
                 "css": {},
+                "variant": "primary",
             },
         },
         {
@@ -417,6 +425,7 @@
                 "default_value": "Run",
                 "name": "button",
                 "css": {"background-color": "red", "--hover-color": "orange"},
+                "variant": "primary",
             },
         },
         {
@@ -461,6 +470,7 @@
                 "default_value": "Run",
                 "name": "button",
                 "css": {},
+                "variant": "primary",
             },
         },
         {