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.
variant	primary \| secondary	primary	Defines the variant of the component. It can be either "primary" or "secondary", with "primary" as the default.
disabled	bool	false	The disabled prop is used to disable the Toggle

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>
    );
  };

Secondary toggle

() => {
  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}
         variant='secondary'
       />
    </div>
    );
  };

Secondary 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}
         variant='secondary'
       />
    </div>
    );
  };

Text

Secondary 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}
         variant='secondary'
       />
    </div>
    );
  };

Secondary 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}
         variant='secondary'
       />
    </div>
    );
  };

Icons

Secondary 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}
         variant='secondary'
       />
    </div>
    );
  };

Secondary 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}
         variant='secondary'
       />
    </div>
    );
  };

Toggle with disabled state

() => {
  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}
         disabled={true}
       />
    </div>
    );
  };

Secondary toggle with disabled state

() => {
  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}
         variant='secondary'
         disabled={true}
       />
    </div>
    );
  };