ButtonGroup

The ButtonGroup component allows you to group related buttons together. It provides a cohesive visual appearance and consistent spacing between buttons.

Import

import yipit_dash_mui_components as dmc

Basic Usage

dmc.ButtonGroup([
    dmc.Button("One"),
    dmc.Button("Two"),
    dmc.Button("Three"),
])

Props

Name	Type	Default	Description
children	React.ReactNode	-	The buttons to be grouped together. Should be dmc.Button components.
color	"inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning"	"primary"	The color of the button group.
variant	"text" | "outlined" | "contained"	"contained"	The variant to use.
size	"small" | "medium" | "large"	"medium"	The size of the buttons.
orientation	"horizontal" | "vertical"	"horizontal"	The orientation of the button group.
disabled	boolean	false	If true, all buttons in the group will be disabled.
disableElevation	boolean	false	If true, no elevation is applied to the buttons.
disableRipple	boolean	false	If true, the ripple effect is disabled for all buttons.
fullWidth	boolean	false	If true, the button group will take up the full width of its container.
sx	SxProps	-	The system prop that allows defining system overrides as well as additional CSS styles.
ariaLabel	string	-	The aria-label attribute for the button group.
ariaLabelledby	string	-	The ID of the element that labels the button group.

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

MUI ButtonGroup Documentation

Examples

Basic Button Group

dmc.ButtonGroup([
    dmc.Button("One", id="basic-btn-1"),
    dmc.Button("Two", id="basic-btn-2"),
    dmc.Button("Three", id="basic-btn-3"),
], ariaLabel="Basic button group")

Different Variants

html.Div([
    dmc.ButtonGroup([
        dmc.Button("Contained 1"),
        dmc.Button("Contained 2"),
        dmc.Button("Contained 3"),
    ], variant="contained", sx={"marginRight": "20px"}),

    dmc.ButtonGroup([
        dmc.Button("Outlined 1"),
        dmc.Button("Outlined 2"),
        dmc.Button("Outlined 3"),
    ], variant="outlined", sx={"marginRight": "20px"}),

    dmc.ButtonGroup([
        dmc.Button("Text 1"),
        dmc.Button("Text 2"),
        dmc.Button("Text 3"),
    ], variant="text"),
])

Different Sizes

html.Div([
    dmc.ButtonGroup([
        dmc.Button("Small 1"),
        dmc.Button("Small 2"),
    ], size="small", sx={"marginRight": "20px"}),

    dmc.ButtonGroup([
        dmc.Button("Medium 1"),
        dmc.Button("Medium 2"),
    ], size="medium", sx={"marginRight": "20px"}),

    dmc.ButtonGroup([
        dmc.Button("Large 1"),
        dmc.Button("Large 2"),
    ], size="large"),
])

Different Colors

html.Div([
    dmc.ButtonGroup([
        dmc.Button("Primary"),
        dmc.Button("Primary"),
    ], color="primary", sx={"marginRight": "10px"}),

    dmc.ButtonGroup([
        dmc.Button("Secondary"),
        dmc.Button("Secondary"),
    ], color="secondary", sx={"marginRight": "10px"}),

    dmc.ButtonGroup([
        dmc.Button("Error"),
        dmc.Button("Error"),
    ], color="error"),
])

Vertical Orientation

dmc.ButtonGroup([
    dmc.Button("Top"),
    dmc.Button("Middle"),
    dmc.Button("Bottom"),
], orientation="vertical")

Disabled Buttons

dmc.ButtonGroup([
    dmc.Button("Disabled 1"),
    dmc.Button("Disabled 2"),
    dmc.Button("Disabled 3"),
], disabled=True)

Without Elevation

dmc.ButtonGroup([
    dmc.Button("No Shadow 1"),
    dmc.Button("No Shadow 2"),
    dmc.Button("No Shadow 3"),
], disableElevation=True)

Notes

• Each button in the group maintains its individual click handling through the n_clicks prop.
• The ButtonGroup component inherits its styling from MUI's ButtonGroup component.
• All buttons within a group will share the same variant, color, and size properties.
• For responsive layouts, consider using the sx prop to adjust spacing and alignment.