Can i change the layout when i click a button?

🔒 Gradio
1

for example, I whould like to add a row or change some other layout of the frame when i click a button. how can i do this operation.

2

You can change the visibility of a row by returning gr.update(visible=True) or gr.update(visible=False) and assign the output to be a Row

3

Hi @abidlabs. Do you know if I can update the css (of the block element)? I’m trying to update the color of a button.

4

Hi @miguelwon yes you can change the color of buttons in your Gradio app using either themes or custom css.

  1. If you’d like to change the color of buttons throughout your entire app, you should create a custom theme, it’s pretty easy using gradio’s built-in theme editor: Theming Guide.

  2. If you’d like to change the color of a specific button, you can assign it an elem_id and target it using custom css, as described here: Custom CSS And JS

5

Hi and thanks for the reply.
Sorry, I was not very clear. I want to know if I can update it dynamically.

6

Hi @miguelwon you can update properties of a gr.Button() component by returning gr.Button.update(...) from your function, as described here: Gradio update Docs

So there are two possibilities here:

  1. You could update the variant property, which (in the default theme) changes the color (from gold if variant is primary, gray if secondary, red if stop)
  2. You could create two different buttons, style them as you want, and then toggle the visibility of the buttons from your function which would make it appear as if the color has changed.
1 Like