Skip to content
Edit this page

Toggle Buttons

Toggle buttons can be used to group related options.

To emphasize groups of related Toggle buttons, a group should share a common container.

The ToggleButtonGroup will control the selected state of its child buttons when given its own value prop.

Exclusive Selection

Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time. Selecting one option deselects any other.

Multiple Selection

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

Sizes

Fancy larger or smaller buttons? Use the size property.

<Grid container spacing={2} direction="column" alignItems="center">
  <Grid item>
    <ToggleButtonGroup size="small" value={alignment} exclusive onChange={handleChange}>
      {children}
    </ToggleButtonGroup>
  </Grid>
  <Grid item>
    <ToggleButtonGroup size="medium" value={alignment} exclusive onChange={handleChange}>
      {children}
    </ToggleButtonGroup>
  </Grid>
  <Grid item>
    <ToggleButtonGroup size="large" value={alignment} exclusive onChange={handleChange}>
      {children}
    </ToggleButtonGroup>
  </Grid>
</Grid>

Standalone toggle button 

<ToggleButton
  value="check"
  selected={selected}
  onChange={() => {
    setSelected(!selected);
  }}
>
  <CheckIcon />
</ToggleButton>

Customized toggle button

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Accessibility

ToggleButtonGroup has role="group". You should provide an accessible label with arial-label="label", aria-labelledby="id" or <label>.

ToggleButton sets aria-pressed="<bool>" according to the button state. You should label each button with aria-label.

API