Pular para o conteúdo
Ajude a traduzir esta página

ButtonGroup API

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

Importação

import ButtonGroup from '@mui/material/ButtonGroup';
// ou
import { ButtonGroup } 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 MuiButtonGroup can be used when providing default props or style overrides in the theme.

Propriedades

Props of the nativo component are also available.

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'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'primary'
A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
disabledboolfalse
Se true, o componente está desabilitado.
disableElevationboolfalse
If true, no elevation is used.
disableFocusRippleboolfalse
If true, the button keyboard focus ripple is disabled.
disableRippleboolfalse
If true, the button ripple effect is disabled.
fullWidthboolfalse
If true, the buttons will take up the full width of its container.
orientation'horizontal'
| 'vertical'		'horizontal'
The group orientation (layout flow direction).
size'small'
| 'medium'
| 'large'
| string		'medium'
The size of the button. small is equivalent to the dense button styling.
sxfunc
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'contained'
| 'outlined'
| 'text'
| string		'outlined'
A variante a usar.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiButtonGroup-rootEstilos aplicados ao elemento raiz.
contained.MuiButtonGroup-containedEstilos aplicados para o elemento raiz se variant="contained".
outlined.MuiButtonGroup-outlinedEstilos aplicados para o elemento raiz se variant="outlined".
text.MuiButtonGroup-textEstilos aplicados para o elemento raiz se variant="text".
disableElevation.MuiButtonGroup-disableElevationEstilos aplicados para o elemento raiz se disableElevation={true}.
disabled.Mui-disabledPseudo-class aplicada a the child elements se disabled={true}.
fullWidth.MuiButtonGroup-fullWidthEstilos aplicados para o elemento raiz se fullWidth={true}.
vertical.MuiButtonGroup-verticalEstilos aplicados para o elemento raiz se orientation="vertical".
grouped.MuiButtonGroup-groupedEstilos aplicados a the children.
groupedHorizontal.MuiButtonGroup-groupedHorizontalEstilos aplicados para the children se orientation="horizontal".
groupedVertical.MuiButtonGroup-groupedVerticalEstilos aplicados para the children se orientation="vertical".
groupedText.MuiButtonGroup-groupedTextEstilos aplicados para the children se variant="text".
groupedTextHorizontal.MuiButtonGroup-groupedTextHorizontalEstilos aplicados para the children se variant="text" and orientation="horizontal".
groupedTextVertical.MuiButtonGroup-groupedTextVerticalEstilos aplicados para the children se variant="text" and orientation="vertical".
groupedTextPrimary.MuiButtonGroup-groupedTextPrimaryEstilos aplicados para the children se variant="text" and color="primary".
groupedTextSecondary.MuiButtonGroup-groupedTextSecondaryEstilos aplicados para the children se variant="text" and color="secondary".
groupedOutlined.MuiButtonGroup-groupedOutlinedEstilos aplicados para the children se variant="outlined".
groupedOutlinedHorizontal.MuiButtonGroup-groupedOutlinedHorizontalEstilos aplicados para the children se variant="outlined" and orientation="horizontal".
groupedOutlinedVertical.MuiButtonGroup-groupedOutlinedVerticalEstilos aplicados para the children se variant="outlined" and orientation="vertical".
groupedOutlinedPrimary.MuiButtonGroup-groupedOutlinedPrimaryEstilos aplicados para the children se variant="outlined" and color="primary".
groupedOutlinedSecondary.MuiButtonGroup-groupedOutlinedSecondaryEstilos aplicados para the children se variant="outlined" and color="secondary".
groupedContained.MuiButtonGroup-groupedContainedEstilos aplicados para the children se variant="contained".
groupedContainedHorizontal.MuiButtonGroup-groupedContainedHorizontalEstilos aplicados para the children se variant="contained" and orientation="horizontal".
groupedContainedVertical.MuiButtonGroup-groupedContainedVerticalEstilos aplicados para the children se variant="contained" and orientation="vertical".
groupedContainedPrimary.MuiButtonGroup-groupedContainedPrimaryEstilos aplicados para the children se variant="contained" and color="primary".
groupedContainedSecondary.MuiButtonGroup-groupedContainedSecondaryEstilos aplicados para the children se variant="contained" and color="secondary".

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

Demonstrações