SplitButton

The custom SplitButton component is a versatile component for triggering actions in your Dash application. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action. 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.SplitButton(
                id="split-button",
                options=[
                    {"label": "Button action 1", "value": "button-action-1"},
                    {"label": "Button action 2", "value": "button-action-2"},
                    {"label": "Button action 3", "value": "button-action-3"},
                ],
                value="button-action-1",  # default selected value
                color="primary",
                variant="contained"
            ),
            html.Div(id="output", style={"marginTop": "20px"})
        ])
    ]
)

@app.callback(
    Output("output", "children"),
    Input("split-button", "value"),
    Input("split-button", "n_clicks")
)
def update_output(selected_action, n_clicks):
    return f"Selected action: {selected_action} (Button clicked {n_clicks} times)"

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

---

Props Table

Below are the main props available for the SplitButton component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
options	{label: string, value: string, disabled?: boolean>}[]	[]	The options to display in the dropdown menu.
value	string	undefined	The currently selected option value.
color	'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'	'primary'	Defines the button color.
variant	'text' | 'outlined' | 'contained'	'text'	Defines the style of the button.