Pular para o conteúdo

ToggleButtonGroup API

Documentação da API para o componente React ToggleButtonGroup . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
// ou
import { ToggleButtonGroup } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiToggleButtonGroup can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'standard'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string
'standard'
The color of the button when it is selected. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
disabledboolfalse
If true, the component is disabled. This implies that all ToggleButton children will be disabled.
exclusiveboolfalse
If true, only allow one of the child ToggleButton values to be selected.
fullWidthboolfalse
If true, the button group will take up the full width of its container.
onChangefunc
Callback fired when the value changes.

Signature:
function(event: object, value: any) => void
event: The event source of the callback.
value: of the selected buttons. When exclusive is true this is a single value; when false an array of selected values. If no value is selected and exclusive is true the value is null; when false an empty array.
orientation'horizontal'
| 'vertical'
'horizontal'
The group orientation (layout flow direction).
size'small'
| 'medium'
| 'large'
| string
'medium'
The size of the autocomplete.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
valueany
The currently selected value within the group or an array of selected values when exclusive is false.
The value must have reference equality with the option in order to be selected.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiToggleButtonGroup-rootEstilos aplicados ao elemento raiz.
vertical.MuiToggleButtonGroup-verticalEstilos aplicados para o elemento raiz se orientation="vertical".
disabled.Mui-disabledState class applied to the root element if disabled={true}.
grouped.MuiToggleButtonGroup-groupedEstilos aplicados a the children.
groupedHorizontal.MuiToggleButtonGroup-groupedHorizontalEstilos aplicados para the children se orientation="horizontal".
groupedVertical.MuiToggleButtonGroup-groupedVerticalEstilos aplicados para the children se orientation="vertical".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações