Skip to main content
Skip table of contents

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.