Conditionally set button color based on value

I was wondering if there’s a way to conditionally set the background color of a button based on a selected row value. I’d like to use the button color as a visual indicator of status for a work item. So, if the value of the given item is In Progress, then the button color should be yellow, if it’s Completed then Green. This is a visual cue to the user, they can then press the button to call an API and switch the status between the two…

Thanks for your help!

Screen Shot 2020-05-21 at 10.42.26 AM

I was hoping maybe I could throw some javascript in the custom background color area, but that does not seem to work…

Hey @gilcrest! There’s no way to do this in Retool natively currently, unfortunately. You might be able to hack around with custom css. This is definitely a good idea, so I’d encourage you to post about it in #feature-requests and tell us a bit more about what you’d want to see!

Thanks @justin - I opened a feature request!



@gilcrest Looks like I spoke too soon! You actually can write Javascript in curly braces to dynamically set the button color in that custom background color area. It doesn’t look like it works (no preview) but it does. So you could write something like this that would make the button red if an order is suspended:

{{ ( == "suspended") ? "red" : "green" }}

Let me know if that works!


Interesting, yeah looks like @justin is right here! You can dynamically generate common color names or hex codes in that custom color setting:

We just need to add the same UI formatting/highlighting to match other fields here!


Ok, awesome!! - thanks a lot - I just assumed it wasn’t going to work as I didn’t get the preview/UI formatting/highlighting you all are talking about, so I went no further - I’m going to try right now :slightly_smiling_face:

Works like a charm - thanks again!


1 Like