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

Grupo de botões

O componente ButtonGroup pode ser usado para agrupar botões relacionados.

Grupo de botões básico

The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children.

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Button variants

All the standard button variants are supported.

<ButtonGroup variant="outlined" aria-label="outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="text" aria-label="text button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Tamanhos e cores

The size and color props can be used to control the appearance of the button group.

<ButtonGroup size="small" aria-label="small button group">
  {buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="medium secondary button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="large button group">
  {buttons}
</ButtonGroup>

Grupo vertical

The button group can be displayed vertically using the orientation prop.

Botão dividido

ButtonGroup também pode ser usado para criar um botão dividido. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.

Elevação desabilitada

Você pode remover a elevação com a propriedade disableElevation.

<ButtonGroup disableElevation variant="contained">
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

API