ToggleButton

A Toggle Button can be used to group related options.

Props

Prop	Type	Default	Description
options	array		The options prop provides flexibility in customizing the appearance and behavior of the toggle buttons.
value	any		The value to associate with the button when selected in a ToggleButtonGroup.
color	standard\| primary\| secondary\| error\| info\| success\| warning\| string	standard	The 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.
onChange	Func		Callback fired when the page is changed.
sx	Array<func \| object \| bool>\| func\| object		The system prop that allows defining system overrides as well as additional CSS styles.

Examples

Icons and Text

Toggle with 2 options

() => {
  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>
    );
  };

Toggle with 3 options

() => {
  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: 'checkCircle', icon: <CheckCircle />, label: 'CheckCircle' },

         ]}
         value={alignment}
         onChange={handleChange}
       />
    </div>
    );
  };

Text

Toggle with 2 options

() => {
  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>
    );
  };

Toggle with 3 options

() => {
  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: 'checkCircle', label: 'CheckCircle' },
         ]}
         value={alignment}
         onChange={handleChange}
       />
    </div>
    );
  };

Icons

Toggle with 2 options

() => {
  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>
    );
  };

Toggle with 3 options

() => {
  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: 'checkCircle', icon: <CheckCircle /> },
         ]}
         value={alignment}
         onChange={handleChange}
       />
    </div>
    );
  };