Stop Button Examples and Reference


Default Stop Button

An example of a default stop button without any extra properties.

import dash
import dash_daq as daq
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.StopButton(
        id='my-stop-button',
        label='Default',
        n_clicks=0
    ),
    html.Div(id='stop-button-output')
])


@app.callback(
    dash.dependencies.Output('stop-button-output', 'children'),
    [dash.dependencies.Input('my-stop-button', 'n_clicks')])
def update_output(n_clicks):
    return 'The stop button has been clicked {} times.'.format(n_clicks)


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

Label

Set the label and label position with label and labelPosition.

import dash_daq as daq

daq.StopButton(
    label='Label',
    labelPosition='top'
)  

Size

Adjust the size (width in pixels) of the stop button with size.

import dash_daq as daq

daq.StopButton(
    size=120,
)  

Button Text

Set the text displayed in the button buttonText.

import dash_daq as daq

daq.StopButton(
    buttonText='text',
)  

Disabled

Disable the button by setting disabled=True.

import dash_daq as daq

daq.StopButton(
    disabled=True,
)  

Stop Button Properties

Access this documentation in your Python terminal with:
```python

help(dash_daq.StopButton)
```

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 (a list of or a singular dash component, string or number; optional): The children of the button.

buttonText (string; default 'Stop'): Text displayed in the button

className (string; optional): Class to apply to the root component element.

disabled (boolean; optional): If true, button cannot be pressesd.

id (string; optional): The ID used to identify this compnent in Dash callbacks

label (dict; optional): Description to be displayed alongside the button. To control styling, pass an object with label and style properties. label has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types:

  • style (dict; optional)
  • label (string; optional)

labelPosition (a value equal to: ‘top’, ‘bottom’; default 'top'): Where the label is positioned.

n_clicks (number; default 0): Number of times the button was clicked

size (number; default 92): The size (width) of the stop button in pixels

style (dict; optional): Style to apply to the root component element.

theme (dict; optional): Theme configuration to be set by a ThemeProvider