Adds a "huggingface" button variant, and makes it the default for `gr…

….LoginButton` and `gr.DuplicateButton` (#9254) * add clear variant * add changeset * duplicate button * add changeset * tweak * tweak * format * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Sep 3, 2024 · 03f3735 · 03f3735
1 parent f8b411f
commit 03f3735
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/.changeset/few-clowns-notice.md b/.changeset/few-clowns-notice.md
@@ -0,0 +1,6 @@
+---
+"@gradio/button": minor
+"gradio": minor
+---
+
+feat:Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`
diff --git a/gradio/components/button.py b/gradio/components/button.py
@@ -28,7 +28,7 @@ def __init__(
         *,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        variant: Literal["primary", "secondary", "stop"] = "secondary",
+        variant: Literal["primary", "secondary", "stop", "huggingface"] = "secondary",
         size: Literal["sm", "lg"] | None = None,
         icon: str | None = None,
         link: str | None = None,
@@ -46,7 +46,7 @@ def __init__(
             value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button.
+            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for no background color (appears white in light mode, black in dark mode).
             size: Size of the button. Can be "sm" or "lg".
             icon: URL or path to the icon file to display within the button. If None, no icon will be displayed.
             link: URL to open when the button is clicked. If None, no link will be used.

diff --git a/gradio/components/duplicate_button.py b/gradio/components/duplicate_button.py
@@ -29,7 +29,7 @@ def __init__(
         *,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        variant: Literal["primary", "secondary", "stop"] = "secondary",
+        variant: Literal["primary", "secondary", "stop", "huggingface"] = "huggingface",
         size: Literal["sm", "lg"] | None = "sm",
         icon: str | None = None,
         link: str | None = None,
@@ -48,7 +48,7 @@ def __init__(
             value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button.
+            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for no background color (appears white in light mode, black in dark mode).
             size: Size of the button. Can be "sm" or "lg".
             icon: URL or path to the icon file to display within the button. If None, no icon will be displayed.
             link: URL to open when the button is clicked. If None, no link will be used.

diff --git a/gradio/components/login_button.py b/gradio/components/login_button.py
@@ -33,7 +33,7 @@ def __init__(
         *,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        variant: Literal["primary", "secondary", "stop"] = "secondary",
+        variant: Literal["primary", "secondary", "stop", "huggingface"] = "huggingface",
         size: Literal["sm", "lg"] | None = None,
         icon: str
         | None = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
@@ -44,7 +44,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
-        scale: int | None = 0,
+        scale: int | None = None,
         min_width: int | None = None,
     ):
         """

diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte
@@ -4,7 +4,8 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let variant: "primary" | "secondary" | "stop" = "secondary";
+	export let variant: "primary" | "secondary" | "stop" | "huggingface" =
+		"secondary";
 	export let size: "sm" | "lg" = "lg";
 	export let value: string | null = null;
 	export let link: string | null = null;
@@ -120,6 +121,12 @@
 		color: var(--button-secondary-text-color);
 	}
 
+	.huggingface {
+		border: var(--button-border-width) solid
+			var(--button-secondary-border-color);
+		background: var(--background-fill-primary);
+	}
+
 	.secondary:hover,
 	.secondary[disabled] {
 		background: var(--button-secondary-background-fill-hover);