Skip to main content
A Toggle Button can be used to group related options. To emphasize groups of related Toggle buttons, a group should share a common container.

​
Import

import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

​
Basic Usage

import * as React from 'react';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

export default function ColorToggleButton() {
  const [alignment, setAlignment] = React.useState('web');

  const handleChange = (
    event: React.MouseEvent<HTMLElement>,
    newAlignment: string,
  ) => {
    setAlignment(newAlignment);
  };

  return (
    <ToggleButtonGroup
      color="primary"
      value={alignment}
      exclusive
      onChange={handleChange}
      aria-label="Platform"
    >
      <ToggleButton value="web">Web</ToggleButton>
      <ToggleButton value="android">Android</ToggleButton>
      <ToggleButton value="ios">iOS</ToggleButton>
    </ToggleButtonGroup>
  );
}

​
ToggleButton Props

​
value
NonNullable<unknown>
required
The value to associate with the button when selected in a ToggleButtonGroup.
​
selected
boolean
If true, the button is rendered in an active state.
​
color
'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
default:"'standard'"
The color of the button when it is in an active state. Supports both default and custom theme colors.
​
size
'small' | 'medium' | 'large'
default:"'medium'"
The size of the component. The prop defaults to the value inherited from the parent ToggleButtonGroup component.
​
disabled
boolean
default:"false"
If true, the component is disabled.
​
disableFocusRipple
boolean
default:"false"
If true, the keyboard focus ripple is disabled.
​
fullWidth
boolean
default:"false"
If true, the button will take up the full width of its container.
​
onChange
(event: React.MouseEvent<HTMLElement>, value: any) => void
Callback fired when the state changes.
​
onClick
(event: React.MouseEvent<HTMLElement>, value: any) => void
Callback fired when the button is clicked.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.
​
children
ReactNode
The content of the component.

​
ToggleButtonGroup Props

​
value
any | any[]
The currently selected value within the group or an array of selected values when exclusive is false.
​
exclusive
boolean
If true, only allow one of the child ToggleButton values to be selected.
​
onChange
(event: React.MouseEvent<HTMLElement>, value: any) => void
Callback fired when the value changes.
​
color
'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
default:"'standard'"
The color of the button when it is selected. Supports both default and custom theme colors.
​
size
'small' | 'medium' | 'large'
default:"'medium'"
The size of the component.
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The component orientation.
​
disabled
boolean
default:"false"
If true, the component is disabled.
​
fullWidth
boolean
default:"false"
If true, the button group will take up the full width of its container.

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us