ToggleButtonGroup

Overview

ToggleButtonGroup controls the selected state of its child buttons when given its own valuable property. Furthermore, ToggleButton would be able to be included in ToggleButtonGroup.

Please refer to this for more information: https://mui.com/material-ui/api/toggle-button-group/.

Import

CODE

import { ToggleButtonGroup } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
Default Style	Color: None	The Default Style of the created component includes Color.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Type: None Size Unit: Px Full-width: False	The component Size of Width and Height with many selectable Size Units, and Type, Full-width.
Layout	Position: None	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
General	Visibility: None Disabled: false Orientation: None Opacity: 100%	The component General includes Visibility, Disabled, Orientation, Value, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<ToggleButtonGroup
                color="primary"
          sx={{':active': {'margin': '20px 15px 20px 20px','padding': '20px 20px 15px',
                'width': '150px','height': '100px',
                'position': 'relative','top': '15px','right': '15px','bottom': '30px','left': '30px',
                'visibility': 'hidden',
                'opacity': 0.53,
                'backgroundColor': '#000000ff',},}}
                 size="medium"
                 fullWidth={true}
                 disabled={true}
                 orientation="horizontal"
                 value={15}>
 </ToggleButtonGroup>

Related Component

ToggleButton