Badge

The Badge component is used to display a small badge or label, often used to show a count or status.

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.Box(
            sx={'display': 'flex', 'padding': 4},
            children=[
                dmc.Badge(
                    id="badge",
                    badgeContent="4",
                    color="primary",
                    children=[dmc.GroupIcon()]
                ),
                dmc.Box(id="output")
            ]
        )
    ]
)

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

Props Table

Below are the main props available for the Badge component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
badgeContent	string or number	null	Content to display inside the badge.
color	string	'default'	Color of the badge.
invisible	boolean	false	If true, the badge is invisible.
max	number	99	Max count to display.
showZero	boolean	false	If true, shows the badge when count is zero.
children	React.ReactNode	null	The content to display inside the badge.

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

MUI Badge Documentation

Props Table​

Props Table