Adds a "huggingface" button variant, and makes it the default for gr.LoginButton and gr.DuplicateButton

.changeset/few-clowns-notice.md

@@ -0,0 +1,6 @@
+---
+"@gradio/button": minor
+"gradio": minor
+---
+
+feat:Adds a "clear" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`

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", "clear"] = "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, 'clear' for no background color.
             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.

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", "clear"] = "clear",
         size: Literal["sm", "lg"] | None = "sm",
         icon: str | None = None,
         link: str | None = None,

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", "clear"] = "clear",
         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,
     ):
         """

js/button/shared/Button.svelte

@@ -4,7 +4,7 @@
 	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" | "clear" = "secondary";
 	export let size: "sm" | "lg" = "lg";
 	export let value: string | null = null;
 	export let link: string | null = null;
@@ -120,6 +120,11 @@
 		color: var(--button-secondary-text-color);
 	}
 
+	.clear {
+		border: var(--button-border-width) solid
+			var(--button-secondary-border-color);
+	}
+
 	.secondary:hover,
 	.secondary[disabled] {
 		background: var(--button-secondary-background-fill-hover);