# Can i change the layout when i click a button?
**URL:**
**Author:**  [@hxin](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fhxin)%5C
**Post date:** [October 27, 2022, 2:35am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fcan-i-change-the-layout-when-i-click-a-button%2F25048%2F1 "2022-10-27T02:35:28Z")
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.
---
**Author:**  [@abidlabs](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fabidlabs)%5C
**Post date:** [November 4, 2022, 4:47am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fcan-i-change-the-layout-when-i-click-a-button%2F25048%2F2 "2022-11-04T04:47:33Z")
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
---
**Author:**  [@miguelwon](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fmiguelwon)%5C
**Post date:** [July 27, 2023, 9:08pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fcan-i-change-the-layout-when-i-click-a-button%2F25048%2F3 "2023-07-27T21:08:50Z")
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.
---
**Author:**  [@abidlabs](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fabidlabs)%5C
**Post date:** [July 30, 2023, 4:36am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fcan-i-change-the-layout-when-i-click-a-button%2F25048%2F4 "2023-07-30T04:36:24Z")
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](https://www.gradio.app/guides/theming-guide#:~:text=Gradio%20features%20a%20built%2Din,the%20Blocks%20or%20Interface%20constructor).
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](https://www.gradio.app/guides/custom-CSS-and-JS)
---
**Author:**  [@miguelwon](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fmiguelwon)%5C
**Post date:** [July 30, 2023, 7:42am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fcan-i-change-the-layout-when-i-click-a-button%2F25048%2F5 "2023-07-30T07:42:11Z")
Hi and thanks for the reply.
Sorry, I was not very clear. I want to know if I can update it dynamically.
---
**Author:**  [@abidlabs](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fabidlabs)%5C
**Post date:** [July 30, 2023, 8:01am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fcan-i-change-the-layout-when-i-click-a-button%2F25048%2F6 "2023-07-30T08:01:18Z")
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](https://www.gradio.app/docs/update)
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.