1. Additional Features
  2. Custom Buttons

Custom Buttons

Many Gradio components support custom buttons in their toolbar, allowing you to add interactive buttons that can trigger Python functions, JavaScript functions, or both. Custom buttons appear alongside built-in buttons (like "copy" or "download") in the component's toolbar.

Basic Usage

To add custom buttons to a component, pass a list of gr.Button() instances to the buttons parameter:

import gradio as gr

refresh_btn = gr.Button("Refresh", variant="secondary", size="sm")
clear_btn = gr.Button("Clear", variant="secondary", size="sm")

textbox = gr.Textbox(
    value="Sample text",
    label="Text Input",
    buttons=[refresh_btn, clear_btn]
)

You can also mix built-in buttons (as strings) with custom buttons:

code = gr.Code(
    value="print('Hello')",
    language="python",
    buttons=["copy", "download", refresh_btn, export_btn]
)

Connecting Button Events

Custom buttons work just like regular gr.Button components. You can connect them to Python functions or JavaScript functions using the .click() method:

Python Functions

def refresh_data():
    import random
    return f"Refreshed: {random.randint(1000, 9999)}"

refresh_btn.click(refresh_data, outputs=textbox)

JavaScript Functions

clear_btn.click(
    None,
    inputs=[],
    outputs=textbox,
    js="() => ''"
)

Combined Python and JavaScript

You can use the same button for both Python and JavaScript logic:

alert_btn.click(
    None,
    inputs=textbox,
    outputs=[],
    js="(text) => { alert('Text: ' + text); return []; }"
)

Complete Example

Here's a complete example showing custom buttons with both Python and JavaScript functions:

import gradio as gr

def export_data(text):
    print("Exporting data:", text)
    return "Data exported to server!"

def refresh_data():
    import random
    return f"Refreshed content: {random.randint(1000, 9999)}"

with gr.Blocks() as demo:
    gr.Markdown("""
    # Textbox with Custom Buttons Demo
    
    This demo showcases custom buttons in a Textbox component that can trigger either (or both):
    - **Python functions** 
    - **JS functions** (with and without input parameters)
    
    You can use emojis, text, or icons for the buttons.
    """)
    
    gr.Markdown("### Textbox with Custom Buttons")
    refresh_btn = gr.Button("Refresh")
    alert_btn = gr.Button("⚠️ Alert")
    clear_btn = gr.Button("🗑️")
    
    textbox = gr.Textbox(
        value="Sample text content that can be exported, refreshed, or transformed.",
        buttons=["copy", refresh_btn, alert_btn, clear_btn],
        label="Sample Text",
        lines=5
    )
    
    output = gr.Textbox(label="Output (Python Function Result)")
        
    
    refresh_btn.click(refresh_data, outputs=textbox)
    
    alert_btn.click(
        None,
        inputs=textbox,
        outputs=[],
        js="(text) => { alert('This is a JavaScript alert!\\n\\nTextbox content: ' + text); return []; }"
    )
    
    
    clear_btn.click(
        None,
        inputs=[],
        outputs=textbox,
        js="() => ''"
    )

demo.launch()

Notes

  • Custom buttons appear in the component's toolbar, typically in the top-right corner
  • Only the value of the Button is used, other attributes like icon are not used.
  • Buttons are rendered in the order they appear in the buttons list
  • Built-in buttons (like "copy", "download") can be hidden by omitting them from the list
  • Custom buttons work with component events in the same way as as regular buttons
←

Internationalization

Creating A Chatbot Fast

→