Toggle Buttons

Los botones de alternancia se pueden utilizar para agrupar opciones relacionadas.

Para enfatizar los grupos de botones Toggle relacionados, un grupo debe compartir un contenedor común.

El ToggleButtonGroup controlará el estado seleccionado de sus botones hijos cuando se le dé su propio valor 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.

Tamaños

Botones más grandes o más pequeños? Usa la propiedad size.

Enforce value set

If you want to enforce at least one button to be active, you can adapt your handleChange function.

const handleFormat = (event, newFormats) => {
  if (newFormats.length) {
    setFormats(newFormats);
  }
};

const handleAlignment = (event, newAlignment) => {
  if (newAlignment !== null) {
    setAlignment(newAlignment);
  }
};

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.

Accesibilidad

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