Button

The Button component is a versatile interactive element for triggering actions in your Dash application. Below are examples of how to use it in Python Dash.

import dash
from dash import html, Input, Output
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')
app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div([
            dmc.Button(
                "Click Me",
                id="button",
                color="primary",
                variant="contained"
            ),
            html.Div(id="output", style={"marginTop": "20px"})
        ])
    ]
)

@app.callback(
    Output("output", "children"),
    Input("button", "n_clicks")
)
def update_output(n_clicks):
    if n_clicks:
        return f"Button clicked {n_clicks} times!"
    return "No clicks yet."

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

Props Table

Below are the main props available for the Button component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
color	'primary' \| 'secondary' \| 'error' \| 'success'	'primary'	Defines the button color.
variant	'text' \| 'outlined' \| 'contained'	'text'	Defines the style of the button.
disabled	boolean	false	Disables the button if set to true.
loading	boolean	false	If true, the button will show a loading indicator.
loadingPosition	'start' \| 'end'	'start'	The position of the loading indicator.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Button Documentation

Props Table​

Props Table