ButtonGroup

Overview

ButtonGroup is used in combination with radio buttons to ensure that only one radio button in a group of radio buttons is selected. The ButtonGroup component manages the selected/unselected state for a set of buttons.

For the group, the ButtonGroup instance guarantees that only one button can be selected at a time.
Initially, all buttons managed by a ButtonGroup instance are unselected.

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

Import

CODE

import { ButtonGroup } 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 Orientation: None Variant: None	The Default Style of the created component includes Color, Orientation, and Variant.
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 Full-width: False Size Unit: Px	The component Size of Width and Height with many selectable Size Units, Type, and Full-width.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Text	Font-family: Noto sans Font-weight: Normal Text align: Left Size Unit: Px	The component Text includes Text, Font-family, Font-size, Font-weight, Font-color, Text-align.
General	Disabled: False Visibility: None Opacity: 100%	The component General includes Disabled, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

 <ButtonGroup variant="contained" aria-label="outlined primary button group">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>