diff --git a/.changeset/witty-suns-marry.md b/.changeset/witty-suns-marry.md
new file mode 100644
index 0000000000000..45f4a97182004
--- /dev/null
+++ b/.changeset/witty-suns-marry.md
@@ -0,0 +1,6 @@
+---
+"@gradio/button": minor
+"gradio": minor
+---
+
+feat:Add icon and link params to `gr.Button`
diff --git a/gradio/components/button.py b/gradio/components/button.py
index 4d932c75becc1..087f688729719 100644
--- a/gradio/components/button.py
+++ b/gradio/components/button.py
@@ -30,6 +30,8 @@ def __init__(
*,
variant: Literal["primary", "secondary", "stop"] = "secondary",
size: Literal["sm", "lg"] | None = None,
+ icon: str | None = None,
+ link: str | None = None,
visible: bool = True,
interactive: bool = True,
elem_id: str | None = None,
@@ -43,6 +45,8 @@ 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.
variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button.
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.
visible: If False, component will be hidden.
interactive: If False, the Button will be in a disabled state.
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.
@@ -67,11 +71,17 @@ def __init__(
self.variant = variant
self.size = size
+ self.icon = icon if icon is None else "/file=" + icon
+
+ self.link = link
+
def get_config(self):
return {
"value": self.value,
"variant": self.variant,
"size": self.size,
+ "icon": self.icon,
+ "link": self.link,
"interactive": self.interactive,
"scale": self.scale,
"min_width": self.min_width,
@@ -83,6 +93,8 @@ def update(
value: str | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
variant: Literal["primary", "secondary", "stop"] | None = None,
size: Literal["sm", "lg"] | None = None,
+ icon: str | None = None,
+ link: str | None = None,
visible: bool | None = None,
interactive: bool | None = None,
scale: int | None = None,
@@ -93,6 +105,8 @@ def update(
"size": size,
"visible": visible,
"value": value,
+ "icon": icon,
+ "link": link,
"interactive": interactive,
"scale": scale,
"min_width": min_width,
diff --git a/gradio/components/clear_button.py b/gradio/components/clear_button.py
index 56652e731ae43..33d122e12c9df 100644
--- a/gradio/components/clear_button.py
+++ b/gradio/components/clear_button.py
@@ -29,6 +29,8 @@ def __init__(
value: str = "Clear",
variant: Literal["primary", "secondary", "stop"] = "secondary",
size: Literal["sm", "lg"] | None = None,
+ icon: str | None = None,
+ link: str | None = None,
visible: bool = True,
interactive: bool = True,
elem_id: str | None = None,
@@ -41,6 +43,8 @@ def __init__(
value,
variant=variant,
size=size,
+ icon=icon,
+ link=link,
visible=visible,
interactive=interactive,
elem_id=elem_id,
diff --git a/js/button/Button.stories.svelte b/js/button/Button.stories.svelte
new file mode 100644
index 0000000000000..82893189ab8b3
--- /dev/null
+++ b/js/button/Button.stories.svelte
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/button/static/Button.svelte b/js/button/static/Button.svelte
index 9bdab9fc49a70..3d55965a8c02c 100644
--- a/js/button/static/Button.svelte
+++ b/js/button/static/Button.svelte
@@ -4,28 +4,58 @@
export let visible = true;
export let variant: "primary" | "secondary" | "stop" = "secondary";
export let size: "sm" | "lg" = "lg";
+ export let value: string | null = null;
+ export let link: string | null = null;
+ export let icon: string | null = null;
export let disabled = false;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
-
+{#if link && link.length > 0}
+
+ {#if icon}
+ 
+ {/if}
+
+
+{:else}
+
+{/if}
diff --git a/js/button/static/StaticButton.svelte b/js/button/static/StaticButton.svelte
index 739e485ac33c7..966b56c4de78a 100644
--- a/js/button/static/StaticButton.svelte
+++ b/js/button/static/StaticButton.svelte
@@ -10,15 +10,20 @@
export let mode: "static" | "dynamic" = "dynamic";
export let size: "sm" | "lg" = "lg";
export let scale: number | null = null;
+ export let icon: string | null = null;
+ export let link: string | null = null;
export let min_width: number | undefined = undefined;