-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds a "huggingface" button variant, and makes it the default for gr.LoginButton
and gr.DuplicateButton
#9254
Conversation
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/c236e82e823ac4316532e69bd1994048d9225301/gradio-4.42.0-py3-none-any.whl Install Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@c236e82e823ac4316532e69bd1994048d9225301#subdirectory=client/python" Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/c236e82e823ac4316532e69bd1994048d9225301/gradio-client-1.5.1.tgz |
🦄 change detectedThis Pull Request includes changes to the following packages.
With the following changelog entry.
Maintainers or the PR author can modify the PR title to modify this entry.
|
gr.LoginButton
gr.LoginButton
and gr.DuplicateButton
Note that the original issue suggested dark buttons on a light theme and vice versa but that is jarring, especially in dark mode (and imo defeats the point of a light/dark setting) so instead, I've gone with light-on-light and dark-on-dark. |
Also I've opted not to change the border radius, as that would break the ability of the button to be grouped with other components, e.g. with gr.Group():
gr.Textbox()
gr.LoginButton() or with gr.Group():
gr.DuplicateButton()
gr.LoginButton() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for handling this @abidlabs! I like your changes which looks much closer to the "official" branding :)
Instead of "clear"
I would maybe renamed it "huggingface"
to emphasize it's HF branding. The advantage of doing so is been able to update the style in the future if we want (compared to "clear" which can only mean "no-background"). For example for more rounded border or to have a different font.
maybe we could add a |
@julien-c I'm a little hesitant with rounded borders because they look inconsistent with other buttons (or other components) generally in the Gradio app which all have a very small border radius, and it wouldn't play well with import gradio as gr
with gr.Blocks() as demo:
with gr.Group():
with gr.Row():
gr.Textbox(show_label=False, scale=2)
gr.LoginButton()
demo.launch()
👍 |
gr.LoginButton
and gr.DuplicateButton
gr.LoginButton
and gr.DuplicateButton
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you!
Thanks all! |
For more consistency with HF Hub branding, this PR adds a "huggingface" button variant, and makes it the default for
gr.LoginButton
Here are the "primary", "secondary", and "clear" variants:
Compare with HF Hub branding: https://huggingface.co/docs/hub/en/oauth#branding
Closes: #5628
wdyt @hannahblair @Wauplin @gary149 @julien-c