ToggleButton

The ToggleButton component can be used to group related options. It can be used as a standalone component or within a ToggleButtonGroup.

Python Dash Example

Below is an example of how to use the ToggleButton component in a Python Dash application.

import dash
from dash import html, callback, Output, Input
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.ToggleButton(
        id="bold-toggle",
        value="bold",
        children="Bold"
      ),
      html.Div(id="toggle-output")
    ])
  ]
)

@callback(
    Output("toggle-output", "children"),
    Input("bold-toggle", "selected")
)
def update_output(selected):
    return f"Selected: {selected}"

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

Props Table

Below are the props for the ToggleButton component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the toggle button.
value	any	None	The value of the button, used for identification in the group.
selected	boolean	false	If true, the toggle button is selected.
disabled	boolean	false	If true, the button will be disabled.
size	'small' \| 'medium' \| 'large'	'medium'	The size of the button.
color	'standard' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning'	'standard'	The color of the button when selected.
fullWidth	boolean	false	If true, the button will take up the full width of its container.
n_clicks	number	0	Number of times the button has been clicked.
sx	object	None	The system prop that allows defining custom styles.
ariaLabel	string	None	The ARIA label of the button.
children	ReactNode	None	The content of the component.

Usage Examples

Single Toggle Button

dmc.ToggleButton(
  value="bold",
  selected=True,
  children="Bold"
)

Different Sizes

html.Div([
  dmc.ToggleButton(size="small", value="small", children="Small"),
  dmc.ToggleButton(size="medium", value="medium", children="Medium"),
  dmc.ToggleButton(size="large", value="large", children="Large"),
])

Different Colors

html.Div([
  dmc.ToggleButton(value="primary", color="primary", selected=True, children="Primary"),
  dmc.ToggleButton(value="secondary", color="secondary", selected=True, children="Secondary"),
  dmc.ToggleButton(value="success", color="success", selected=True, children="Success"),
])

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

MUI ToggleButton Documentation

Python Dash Example​

Props Table​

Usage Examples​

Single Toggle Button​

Different Sizes​

Different Colors​