ToggleButton

A Toggle Button can be used to group related options.

Props

PropTypeDefaultDescription
optionsarrayThe options prop provides flexibility in customizing the appearance and behavior of the toggle buttons.
valueanyThe value to associate with the button when selected in a ToggleButtonGroup.
colorstandard| primary| secondary| error| info| success| warning| stringstandardThe color of the button when it is in an active state. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
onChangeFuncCallback fired when the page is changed.
sxArray<func | object | bool>| func| objectThe system prop that allows defining system overrides as well as additional CSS styles.

Examples

Subtle

() => {
const [alignment, setAlignment] = React.useState('desktop');
const handleChange = (event, newAlignment) => {
setAlignment(newAlignment);
};
return (
<div>
<ToggleButton
options={[
{ value: 'desktop', icon: <Desktop />, label: 'Desktop' },
{ value: 'mobile', icon: <Mobile />, label: 'Mobile' },
]}
value={alignment}
onChange={handleChange}
/>
</div>
);
};

Text

() => {
const [alignment, setAlignment] = React.useState('mobile');
const handleChange = (event, newAlignment) => {
setAlignment(newAlignment);
};
return (
<div>
<ToggleButton
options={[
{ value: 'desktop', label: 'Desktop' },
{ value: 'mobile', label: 'Mobile' },
]}
value={alignment}
onChange={handleChange}
/>
</div>
);
};

Icons

() => {
const [alignment, setAlignment] = React.useState('desktop');
const handleChange = (event, newAlignment) => {
setAlignment(newAlignment);
};
return (
<div>
<ToggleButton
options={[
{ value: 'desktop', icon: <Desktop /> },
{ value: 'mobile', icon: <Mobile /> },
]}
value={alignment}
onChange={handleChange}
/>
</div>
);
};