Ensure Button icon looks good when no text is specified

[DRomatzki]

• [x] I have searched to see if a similar issue already exists. Yes

All gradio components have labels that can be displayed, set to "" or "show_label=false". However, only in the latter is the space reserved for the "label" removed" and you can style the component as required. Even with an empty string the reserved space for the label is still applied and stuffs up styling. The button has no "show_label" parameter and thus the label parameters/fonts/margins/padding are still applied. This means when you specify an icon, it can not be centered and the button size can not be adjusted to the icon size. The only option is to have an icon AND a label to look nice.

Describe the solution you'd like
Please add a "show_label: boolean" option to the button component so that we can centre an icon and resize the button according.

If I misunderstood this or missed some code example for centering the icon, please let me know.

[missionfloyd]

It can be adjusted with CSS. https://www.gradio.app/guides/custom-CSS-and-JS

import gradio as gr

css = '''
#mybutton{
    width: 56px;
}

#mybutton > img {
    margin-right: 0 !important;
}
'''

with gr.Blocks(css=css) as demo:
    textbox1 = gr.Textbox()
    textbox2 = gr.Textbox()
    btn = gr.Button(value="", icon="pumpkin.png", elem_id="mybutton")

    btn.click(fn=lambda x: x, inputs=textbox1, outputs=textbox2)

demo.launch()

Or you can use emojis (and CSS).

import gradio as gr

css = '''
#mybutton {
    width: 56px;
}
'''

with gr.Blocks(css=css) as demo:
    textbox1 = gr.Textbox()
    textbox2 = gr.Textbox()
    btn = gr.Button(value="👍", elem_id="mybutton")

    btn.click(fn=lambda x: x, inputs=textbox1, outputs=textbox2)

demo.launch()

[DRomatzki]

Sorry about the misunderstanding.... I did use css but could not get it to work. I did not consider the "img" tag... That was my mistake. Thank you for the help....

[abidlabs]

Thanks @missionfloyd @DRomatzki. No need for a show_label parameter but we should make sure the button looks good when an icon but no label is specified.

[abidlabs]

Closed via https://github.com/gradio-app/gradio/pull/9405