Add icon and link params to gr.Button

[hannahblair]

Description

This PR allows us to add a link and icon to the gr.Button component. The default icon placement is central alongside the text:

If a different icon placement is desired, we can use custom css.

---

Icon Demo

import gradio as gr

with gr.Blocks(css = """button {justify-content: left !important;}""") as demo:
    gr.Button(value="Login with HF", icon='https://huggingface.co/front/assets/huggingface_logo-noborder.svg')
    
demo.launch()

---

Link Demo

import gradio as gr

with gr.Blocks() as demo:
    gr.Button(value="Login with HF", link="https://huggingface.co/login")
    
demo.launch()

Closes: #5060

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	Aug 4, 2023 3:00pm

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/button	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Add icon and link params to gr.Button

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[gradio-pr-bot]

🎉 Chromatic build completed!

There are 0 visual changes to review.
There are 0 failed tests to fix.

• Storybook Preview
• Build Review

[abidlabs]

Very cool! cc @Wauplin

[Wauplin]

Awesome! Love this work @hannahblair !

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-5080-all-demos

---

You can install the changes in this PR by running:

pip install https://gradio-builds.s3.amazonaws.com/e00ebfb5de9e25c4a29bcec7a8e11b0d23d2861f/gradio-3.39.0-py3-none-any.whl

[abidlabs]

Noticed something interesting while reviewing @hannahblair:

If I add a link, the width of the gr.Button() changes:

import gradio as gr

with gr.Blocks() as demo:
    gr.Button(icon="cheetah.jpg")
    
demo.launch()

produces this:

whereas:

import gradio as gr

with gr.Blocks() as demo:
    gr.Button(icon="cheetah.jpg", link="https://www.google.com")
    
demo.launch()

produces this:

[abidlabs]

Nice @hannahblair! Just a few nits above and then should be good to go

[hannahblair]

@abidlabs Thanks for catching those! Updates pushed.

[abidlabs]

Thanks @hannahblair. Can confirm that those issues are fixed. However, I noticed that there's some subtle inconsistencies when applying other props to gr.Button() along with link.

1. scale seems to have no effect if link is provided. You can test by comparing:

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox()
    with gr.Row():
        b1 = gr.Button(link="https://www.google.com", scale=2, min_width=0)
        b2 = gr.Button(link="#", scale=1, min_width=0)
    b1.click(lambda :"hi", None, textbox)
    
demo.launch()

to

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox()
    with gr.Row():
        b1 = gr.Button(scale=2, min_width=0)
        b2 = gr.Button(scale=1, min_width=0)
    b1.click(lambda :"hi", None, textbox)
    
demo.launch()

2. The behavior of visible is different if a link is provided -- it still makes something invisible but it takes up space. Compare:

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox()
    with gr.Row():
        b1 = gr.Button(visible=False, min_width=0, link="#")
        b2 = gr.Button(min_width=0, link="https://www.google.com")
    b1.click(lambda :"hi", None, textbox)
    
demo.launch()

with

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox()
    with gr.Row():
        b1 = gr.Button(visible=False, min_width=0)
        b2 = gr.Button(min_width=0)
    b1.click(lambda :"hi", None, textbox)
    
demo.launch()

[hannahblair]

@abidlabs Sorry for the oversight - The new <a /> tag didn't have all the classes applied. Refactored and fixed.

[abidlabs]

Lgtm @hannahblair! Thanks for addressing the feedback

[Wauplin]

I'm sorry but I can't seem to make icon button work locally. What I did so far:

• git checkout main + git pull
• create a app.py file with

import gradio as gr

with gr.Blocks(css="""button {justify-content: left !important;}""") as demo:
    gr.Button(value="Login with HF", icon="https://huggingface.co/front/assets/huggingface_logo-noborder.svg")

demo.launch()

• run python app.py

And I only get a simple button with text but without the logo. I guess I'm missing something but I don't know what. I also tried bash scripts/build_frontend.sh in case something has to be rebuilt but it fails with an error related to gradio js client:

[vite]: Rollup failed to resolve import "semiver" from "/home/wauplin/projects/gradio/client/js/src/client.ts".

Any way I could get that working? I'm looking forward to integrate it in the "Sign in with HF" PR to get nice icons 😃

(edit: also did bash scripts/install_gradio.sh which succeeded but that's python-related it seems)

EDIT:

>>> node -v
v18.12.1
>>> npm -v
8.19.2
>>> pnpm -v
8.6.12
>>> python --version
Python 3.9.12

[abidlabs]

That code is working for me @Wauplin. The most likely culprit is that you need to build the frontend first.

Can you try running pnpm i from the root gradio directory (the same directory where you run bash scripts/build_frontend.sh) and then re-run bash scripts/build_frontend.sh

[hannahblair]

Hey @Wauplin! I can also confirm I've got it working in a HF Space here. Have a go at running the commands @abidlabs suggested and let us know if that works for you. 🙂

[Wauplin]

Thanks both! I finally made it work 😄 I deleted node_modules/ folder and reinstalled everything which fixed my issue.
And I can confirm that I have my HF-button working now! 🤗

[hannahblair]

Ah great to hear! Thanks for letting us know 😄

[shinetzh]

when use gr.update(icon=...) or gr.Button.update(icon=...), the icon of the button went wrong, like this

the original button is this:

[hannahblair]

Hi @shinetzh! Thanks for pointing this out. This is actually isn't something that we've implemented yet, but I agree that we should! I'll create an issue for this update functionality and get to it as soon as I can. 🙂

Edit: here's the issue for your reference

[muge-birlik]

When clicked on a button with a link, Is it possible to open the link in a new tab?

[abidlabs]

@muge-birlik that is already the case by default for any links that are not anchor links in the same page.

e.g. try with:

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox()
    with gr.Row():
        b1 = gr.Button(link="https://www.google.com", scale=2, min_width=0)
        b2 = gr.Button(link="#", scale=1, min_width=0)
    b1.click(lambda :"hi", None, textbox)
    
demo.launch()