dcc.Button
dcc.Button works like html.Button, but has consistent styling with other Dash Core Components.
New in Dash 4.0. With earlier versions of Dash, use html.Button.
Examples
Find a few usage examples below.
Button Basic Example
An example of a default button without any extra properties
and n_clicks in the callback. n_clicks is an integer that represents
that number of times the button has been clicked. Note that the original
value is None.
from dash import Dash, dcc, html, Input, Output, State, callback
app = Dash()
app.layout = html.Div([
dcc.Input(id='input-on-submit', type='text'),
dcc.Button('Submit', id='submit-val', n_clicks=0),
html.Div(id='container-button-basic',
children='Enter a value and press submit')
])
@callback(
Output('container-button-basic', 'children'),
Input('submit-val', 'n_clicks'),
State('input-on-submit', 'value'),
prevent_initial_call=True
)
def update_output(n_clicks, value):
return 'The input value was "{}" and the button has been clicked {} times'.format(
value,
n_clicks
)
if __name__ == '__main__':
app.run(debug=True)
Determining Which Button Changed with dash.ctx
This example uses the dash.ctx property
to determine which input changed.
from dash import Dash, dcc, html, Input, Output, ctx, callback
app = Dash()
app.layout = html.Div([
dcc.Button('Button 1', id='btn-nclicks-1', n_clicks=0),
dcc.Button('Button 2', id='btn-nclicks-2', n_clicks=0),
dcc.Button('Button 3', id='btn-nclicks-3', n_clicks=0),
html.Div(id='container-button-timestamp')
])
@callback(
Output('container-button-timestamp', 'children'),
Input('btn-nclicks-1', 'n_clicks'),
Input('btn-nclicks-2', 'n_clicks'),
Input('btn-nclicks-3', 'n_clicks')
)
def displayClick(btn1, btn2, btn3):
msg = "None of the buttons have been clicked yet"
if "btn-nclicks-1" == ctx.triggered_id:
msg = "Button 1 was most recently clicked"
elif "btn-nclicks-2" == ctx.triggered_id:
msg = "Button 2 was most recently clicked"
elif "btn-nclicks-3" == ctx.triggered_id:
msg = "Button 3 was most recently clicked"
return html.Div(msg)
if __name__ == '__main__':
app.run(debug=True)
Button Properties
Access this documentation in your Python terminal with:
```pythonhelp(dash.dcc.Button)
```
Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.
children (list of or a singular dash component, string or number; optional):
The children of this component.
className (string; optional):
Additional CSS class for the root DOM node.
persistence (string | number | boolean; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.
persisted_props (boolean | number | string | list | dict; optional):
Properties whose user interactions will persist after refreshing the
component or the page. Since only value is allowed this prop can
normally be ignored.
persistence_type (a value equal to: None, ‘local’, ‘session’ or ‘memory’; optional):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.
id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.
componentPath (boolean | number | string | list | dict; optional)
type (a value equal to: None, ‘submit’, ‘reset’ or ‘button’; default 'button'):
Defines the type of the element.
autoFocus (boolean; optional):
The element should be automatically focused after the page loaded.
disabled (boolean; optional):
Indicates whether the user can interact with the element.
form (string; optional):
Indicates the form that is the owner of the element.
formAction (string; optional):
Indicates the action of the element, overriding the action defined in
the <form>.
formEncType (string; optional):
If the button/input is a submit button (type=”submit”), this attribute
sets the encoding type to use during form submission. If this
attribute is specified, it overrides the enctype attribute of the
button’s form owner.
formMethod (string; optional):
If the button/input is a submit button (type=”submit”), this attribute
sets the submission method to use during form submission (GET, POST,
etc.). If this attribute is specified, it overrides the method
attribute of the button’s form owner.
formNoValidate (boolean; optional):
If the button/input is a submit button (type=”submit”), this boolean
attribute specifies that the form is not to be validated when it is
submitted. If this attribute is specified, it overrides the novalidate
attribute of the button’s form owner.
formTarget (string; optional):
If the button/input is a submit button (type=”submit”), this attribute
specifies the browsing context (for example, tab, window, or inline
frame) in which to display the response that is received after
submitting the form. If this attribute is specified, it overrides the
target attribute of the button’s form owner.
name (string; optional):
Name of the element. For example used by the server to identify the
fields in form submits.
value (string | number | list of strings; optional):
Defines a default value which will be displayed in the element on page
load.
accessKey (string; optional):
Keyboard shortcut to activate or add focus to the element.
contentEditable (boolean; optional):
Indicates whether the element’s content is editable.
dir (string; optional):
Defines the text direction. Allowed values are ltr (Left-To-Right) or
rtl (Right-To-Left).
draggable (boolean; optional):
Defines whether the element can be dragged.
hidden (boolean; optional):
Prevents rendering of given element, while keeping child elements,
e.g. script elements, active.
lang (string; optional):
Defines the language used in the element.
role (string; optional):
Defines the role of an element in the context of accessibility.
spellCheck (boolean; optional):
Indicates whether spell checking is allowed for the element.
style (boolean | number | string | list | dict; optional):
Defines CSS styles which will override styles previously set.
tabIndex (number; optional):
Overrides the browser’s default tab order and follows the one
specified instead.
title (string; optional):
Text to be displayed in a tooltip when hovering over the element.
n_blur (number; default 0):
Number of times the button lost focus.
n_blur_timestamp (number; default -1):
Last time the button lost focus.
n_clicks (number; default 0):
Number of times the button has been clicked.
n_clicks_timestamp (number; default -1):
Last time the button was clicked.