Category: How do I do X?
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Button Color Change on Click

Issue

I want to change the color of a button when I click on it. As an option, I can use the storeValue function to store true when the button is clicked and then bind the value of the store to the Button Color property.

Resolution

To change the button color on click in Appsmith, you can use the storeValue function to store true when the button is clicked. This function takes two arguments: the key to store the value under (in this case, 'buttonClicked') and the value to store (true).

Once the button click value is stored, you can bind it to the Button Color property using the curly braces syntax. The code looks like this:

{{appsmith.store.buttonClicked ? '#08c' : '#ff0'}}

This code checks whether the value of 'buttonClicked' in the store is true. If it is, it sets the button color to #08c (a shade of blue); otherwise, it sets the color to #ff0 (a shade of yellow).

Here's a summary of the steps you need to take to change the button color on click:



  1. Add an onClick handler to the button.

  2. In the onClick handler, call the storeValue function to store true under the key 'buttonClicked'.

  3. Bind the Button Color property to the value of 'buttonClicked' in the store using the curly braces syntax.

With these steps, your button will change color when clicked!