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.

Nome	Tipo	Padrão	Descrição
children	node		O conteúdo do componente.
classes	object		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.
disabled	bool	false	If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.
exclusive	bool	false	If `true`, only allow one of the child ToggleButton values to be selected.
fullWidth	bool	false	If `true`, the button group will take up the full width of its container.
onChange	func		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.
sx	Array<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.
value	any		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 regra	Classe global	Descrição
root	.MuiToggleButtonGroup-root	Estilos aplicados ao elemento raiz.
vertical	.MuiToggleButtonGroup-vertical	Estilos aplicados para o elemento raiz se `orientation="vertical"`.
disabled	.Mui-disabled	State class applied to the root element if `disabled={true}`.
grouped	.MuiToggleButtonGroup-grouped	Estilos aplicados a the children.
groupedHorizontal	.MuiToggleButtonGroup-groupedHorizontal	Estilos aplicados para the children se `orientation="horizontal"`.
groupedVertical	.MuiToggleButtonGroup-groupedVertical	Estilos aplicados para the children se `orientation="vertical"`.

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

Com um nome de classe global.
Com um nome de regra como parte da propriedade styleOverrides do componente em um tema personalizado.

Demonstrações

Toggle button