Change button color upon clicking

Support, Troubleshooting, & Help
1

Hi, is it possible for you guys to make the button change color upon clicking? Thanks!

1 Like
2

That is a great question. It is not possible at the moment. We will share this feedback with our engineering team and plan to include it in the product in the future.

1 Like
3

Hi has this been implemented yet i really want to create a traffic light system ?

4

Hi @AdamBicheno,

the simplest way would be something like that:

image
image710Ă—644 12.7 KB

image
image
image1830Ă—1634 95.6 KB

color_switch

5

Hi, I created different buttons to select the correct answer, as if it were a questionnaire. I only had to create 1 Text variable and 3 color variables:

image
image875Ă—622 5.69 KB

This is the result:

image
image928Ă—526 25.2 KB

image
image929Ă—528 24.3 KB

image
image924Ă—518 25.1 KB

6

@Jhondy quick note that I’ve used in building apps to make this process pretty simple -

Objects are an easy way to group multiple variables together. If I make an Object that is a group of colors, I can change them all at once.

I create an Object variable in Tulip like this:

button_1
{
“font” = a color ,
“background” = a color,
“border” = a color
}

And I create two more: button_idle and button_positive.

I set default colors in button_idle and button_positive to be the colors I want my buttons to change.

Now, with one trigger I can change all my buttons at once:

image
image1213Ă—577 12.1 KB

Note that in order for the assignments to work, all the variable names must be identical (i.e. everything needs a “font”, “background”, and “border” labeled as such)

image

Now, with one trigger function I assign three variables (my idle button font, background, and border color) to three other variables (my button_1 font, background, and border color) .

Try this out if you want more advanced button coloring!

3 Likes
7

It works very well, thank you!

8

I wish buttons could have two states. “Pressed” and “Not Pressed”. Then you should be able to set styling to the two different states. Bg-colors, font-colors, border-colors etc…

You could also ask if button is pressed or not.

9

…and also “inactive”
you should also be able to deactivate a Button by trigger logic and make it visible.

But then the formating gets complicated. There would be a “copy format” button needed and a format library :wink:

This topic can get huge very fast.

Feel free to write product suggestions.

10

Product suggestions are a great place to put this! Not to get too deep into it, but I know that topics such as this (Disable/Hiding buttons based on criteria, improving state tracking of widgets) are currently being looked at by our Product teams. This feedback is (as always) instrumental in informing where we look next - you might be excited at what’s coming out later in the year :wink: