How to hide html.button

Hello,

I am trying to hide a html.button before I receive some input from the user, I declare the button as:

html.Button('Button', id='hidden_button', hidden=True)

And I update the button like this:

@app.callback(
    Output('hidden_button', 'hidden'),
    [Input('time_series_graph', 'clickData')])
def show_button(clickData):
      if condition:
           return False
      else:
            return True

However, this does not work, and the button is just shown from the start. Any idea what I am doing wrong? Thank you.

Dash components have no hidden property, they use CSS. You need to use the style property:

...
html.Button(id='hidden-button', style = dict(display='none'))
...

Then in your function you need the Output to be the style property of hidden-button.

...
if condition:
    return dict()
else:
    return dict(display='none')
...
2 Likes

Thank you, this worked, I was confused because on this page, the button has a ‘hidden’ property.