ToggleButton

Overview

ToggleButton creates a toggle button UI component connected to a database field. It is used for filtering results based on a fixed set of toggleable options.

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

Import

CODE

import { ToggleButton } 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	The component Size of Width and Height with many selectable Size Units, and Type.
Text	Text: Small Font-family: None Size Unit: Px Font-weight: None Text align: Left	The component Text includes Text, Font-family, Font-size, Font-weight, Size Unit, Font-color, Text-align.
General	Visibility: None Disabled: false Selected: false Value: left Opacity: 100%	The component General includes Visibility, Disabled, Selected, Value, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<ToggleButton
                value="left"
            sx={{':hover': {'margin': '20px 20px 15px','padding': '20px 20px 15px',
                'width': '150px','height': '100px', 'fontFamily': 'Noto-Sans',
                'fontSize': '15px','fontWeight': 'lighter',
                'color': '#f50202ff',
                'justifyContent': 'center',
                'visibility': 'visible',
                'opacity': 0.62,
                'backgroundColor': '#500000ff',},}}
                 color="standard"
                 size="medium"
                 disabled={true}
                 selected={true}>Text1
</ToggleButton>

Common UI Component:

ToggleButtonGroup