How to fire html.Button on page load? I.e. have a default active button

Hi there,

On my dash app I have 3 buttons and I want to set one of them to be the default active pressed button upon page load. So when I load up my app, this one button should look like it’s already been pressed.

Looking at other somewhat similar examples, I still haven’t been able to find the solution for my case. As I understand, if n_clicks=0 or n_clicks=None then it should fire on page load? I have tried both, setting n_clicks to 0 and None (the latter of which is shown below). I also tried using dbc.Button instead and using the active=True property as well, but so far with no results.

From my code, I want to set my “Overview” button to be the active pressed button when I first load up.

Would appreciate any help on this. Thank you.

Button code:

    # Buttons
    html.Div([
        html.Button('Overview', id='button_overview', n_clicks=None),
        html.Button('Details', id='button_details', n_clicks=1),
        html.Button('Employee Data', id='button_employee_data', n_clicks=1),
        html.Div(id='page')
    ]),

Callback code:

# Callback - buttons
@app.callback(Output('page', 'children'),
              Input('button_overview', 'n_clicks'),
              Input('button_details', 'n_clicks'),
              Input('button_employee_data', 'n_clicks'))

1 post - 1 participant

Read full topic