Active Property in dbc.Button, why do not change when the button is clicked?

active ( boolean ; optional): Whether button is in active state. Default: False.

I was wondering to use this property instead of n_clicks to simplify the callback, if the active is False then no_update, if it is True then execute the callback, but I notice that when I clicked the button the active property do not change althought the button change its appearance (it looks active :thinking:),

Before clicking:

image

After clicked:
image1

Property status:
image2

@tcbegley is this a bug?

Thanks :smiley:

Hey @Eduardo

Not a bug, or at least it’s intentional. The active prop is to be used as an override when you want the Button to be styled as active rather than allow it to set its style based on hover or click events. It is therefore not meant to represent whether the button is currently styled as active, rather whether it is currently being overridden as active.

Using active to trigger a callback is interesting, but I think better to have consistency with html.Button and dcc.Button by using n_clicks rather than have multiple ways to accomplish the same thing.

1 Like

Thanks @tcbegley, I understand the idea, you can use the property to change the button style but not the other way :woozy_face:

The problem with n_clicks is that you don’t have a direct way to know if the button was the trigger of the calback when the button was used before, it needs to use aditional options like callback_context.

There is a callback context you can use to know if the button was triggered.

ctx = callback_context
print(ctx.triggered[0]['prop_id'].split('.')[0])

Put this in your callback and should show the list of components that triggered it. I use it to determine which button was clicked in mine and then do something specific based on that.

Thanks @tphil10

I use this method too, but my point is that with other properties you can simply write:

if not thisproperty:
    no_update

With callback_context you need:

import callback_context

ctx = callback_context
triggered = ctx.triggered[0]['prop_id'].split('.')[0]

if triggered =! myvariable:
   no_update

I’m not sure if its for simplicity or because at my age I allways forgot where I have a callback_context example to copy the formula :joy:

Yea triggering context is a bit tough because of the multitude of ways something actually get triggered either directly or indirectly.

I finding myself combining it with Advanced Callbacks | Dash for Python Documentation | Plotly things to get what i’m after.

1 Like