Dash Dynamic Button active style

Helllo Frinds,

I have Q I hope u could help me
I create unknown number of dynamic buttons. The problem is that I want to add active to the clicked button
I tried with match where i send new style, it worked but it changed all the buttons the I will click it and change there style to the new style I just sent so all clicked button will take the new style

I need to send the new style only for clicked one and update the other to original style ‘hard coded on the button’.

or another solution

CSS only hover works active didn’t work
thanks guys

One way to go is using a pattern-matching callback and its context:

app.layout = html.Div(
    [ dbc.Button(f"Button-{i}", id={"type": "button", "index": i,},  color="primary") for i in range(3) ]
)   

@app.callback(
    Output({'type': 'button', 'index': ALL}, 'color'),
    Input({'type': 'button', 'index': ALL}, 'n_clicks'),
)
def change_button_color(n_clicks):

    color_list = ["primary" for i in range(3)]

    ctx = dash.callback_context

    if ctx.triggered:
        button_id = ctx.triggered[0]["prop_id"].split(".")[0]
        clicked_idx = json.loads(button_id)["index"]
        color_list[clicked_idx] = "secondary"

    return color_list

Note that the id in the callback context is a stringified dictionary, so I used json to parse it and get the index only. This only takes care of the style after click, but it can be supplemented with whatever extra output and logic you need.

Hope that helps!