Chip

The Chip component is used to display a small, interactive element, often used for tags or categories.

import dash
from dash import html
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=[
        dmc.Chip(
            id="chip",
            label="Example Chip",
            color="primary",
            clickable=True,
            n_clicks=0,
            n_clicks_delete=0
        ),
        html.Div(id="output")
    ]
)

@app.callback(
    dash.Output("output", "children"),
    [dash.Input("chip", "n_clicks"), dash.Input("chip", "n_clicks_delete")]
)
def update_output(n_clicks, n_clicks_delete):
    return f"Chip clicked {n_clicks} times, delete clicked {n_clicks_delete} times"

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

Props Table

Below are the main props available for the Chip component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
label	string	null	Text to display inside the chip.
color	string	'default'	Color of the chip.
onDelete	function	null	Callback function when delete icon is clicked.
clickable	boolean	false	If true, the chip is clickable.

For the full list of props, refer to the official MUI documentation, as these components are based on MUI:

MUI Chip Documentation

Props Table​

Props Table