dynamic colors for UI Builder components

[Vedavalli]

Hi 

I'm using repeater component in that I'm using button component. Showing some names in button label using data resource. In filter I'm showing A,B,C. Using filter data is rendering in button label so if i apply A It's showing other values in button label can i show background color green for A. If i click on B in filter it should show red color in background of that label.

Thanks.

[KKM]

Hi @Vedavalli,

You can dynamically change the background color of the button based on the selected filter value. Here's how you can achieve this:

Steps:
Use a state variable to track the selected filter (A, B, or C).

Use a conditional check to apply the background color dynamically to the buttons.

Update the state when the user selects a filter.

Example in React:

import { useState } from "react";

const ButtonRepeater = () => {
const [selectedFilter, setSelectedFilter] = useState(""); // Track selected filter
const data = ["A", "B", "C", "D", "E"]; // Example data

// Function to get background color based on filter
const getBackgroundColor = (label) => {
if (selectedFilter === "A" && label === "A") return "bg-green-500";
if (selectedFilter === "B" && label === "B") return "bg-red-500";
return "bg-gray-300"; // Default background
};

return (
<div>
{/* Filter Buttons */}
<div className="flex space-x-2 mb-4">
{["A", "B", "C"].map((filter) => (
<button
key={filter}
onClick={() => setSelectedFilter(filter)}
className="px-4 py-2 border rounded bg-blue-500 text-white"
>
{filter}
</button>
))}
</div>

{/* Repeater Buttons */}
<div className="flex space-x-2">
{data.map((label, index) => (
<button
key={index}
className={`px-4 py-2 border rounded text-white ${getBackgroundColor(label)}`}
>
{label}
</button>
))}
</div>
</div>
);
};

export default ButtonRepeater;
How It Works:
Clicking on Filter Buttons (A, B, C) updates the selectedFilter state.

getBackgroundColor function applies:

Green (bg-green-500) if A is selected and matches the label.

Red (bg-red-500) if B is selected and matches the label.

Default gray (bg-gray-300) for other buttons.

This should solve your issue!

Kindly mark it as "Accepted Solution"/"helpful", as it resolves your query. Please press like button for the resolution provided.

With Regards,
Krishna Kumar M - Talk with AIT3ch
LinkedIn: https://www.linkedin.com/in/mkrishnak4/
YouTube: https://www.youtube.com/@KrishAIT3CH
Topmate: https://topmate.io/mkrishnak4 [ Connect for 1-1 Session]

[Vedavalli]

Hi @KKM 

I want similar functionality in ui builder?

[Dibyaratnam]

so for what you want that dynamic color? for the button? can you share some pictures of your existing setup/configurations