Dash core component for basic Button with click event?

Question

I'm trying to create an app with multiple tabs for different sets of information. My first thought was to use html Buttons but there's not dash_core_component for this, and I can't find documentation on anything I can use in it's place. Basically, when I click a button (or link), I'd like to get a "clicked" event with the id of the button so I can redraw the layout for the selected page.

Is there a way to do this with existing components? Is there documentation on how to create new components that can be wired into the callback system? I feel like I must be missing something obvious, but I've failed to find anything after a lot of searching.

Thanks!

Answer 1

In fact, they do have a click event available for a button in the latest dash_html_components, but it doesn't appear to be fully documented yet. The creator, chriddyp, has stated that the Event object may not be future-proof, but that State should be.

Using State like:

@app.callback(
    Output('output', 'children'),
    [Input('button-2', 'n_clicks')],
    state=[State('input-1', 'value'),
     State('input-2', 'value'),
     State('slider-1', 'value')])

you can use values as inputs, without initiating the callback if they change -- instead waiting for the Input('button', 'n_clicks') to fire off the callback.

Copying full code example below from the link:

import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
    html.Button('Click Me', id='button'),
    html.H3(id='button-clicks'),

    html.Hr(),

    html.Label('Input 1'),
    dcc.Input(id='input-1'),

    html.Label('Input 2'),
    dcc.Input(id='input-2'),

    html.Label('Slider 1'),
    dcc.Slider(id='slider-1'),

    html.Button(id='button-2'),

    html.Div(id='output')
])

@app.callback(
    Output('button-clicks', 'children'),
    [Input('button', 'n_clicks')])
def clicks(n_clicks):
    return 'Button has been clicked {} times'.format(n_clicks)

@app.callback(
    Output('output', 'children'),
    [Input('button-2', 'n_clicks')],
    state=[State('input-1', 'value'),
     State('input-2', 'value'),
     State('slider-1', 'value')])
def compute(n_clicks, input1, input2, slider1):
    return 'A computation based off of {}, {}, and {}'.format(
        input1, input2, slider1
    )

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 2

Aha! Finally found the answer, documented here: https://plot.ly/dash/urls

It would be nice to link this into the User Guide in a more obvious way (in the index?)