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';

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

Props of the nativo component are also available.

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 a button when it is selected.
disabled	bool	false
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	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.

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
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:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.