Pular para o conteúdo

🎉 Material UI v5 is out now! Check out the announcement blog post →

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

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

Tamanhos e cores

<ButtonGroup size="small" aria-label="small outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined secondary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="large" color="primary" aria-label="large outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Grupo vertical

Botão dividido

ButtonGroup também pode ser usado para criar um botão dividido. A lista suspensa pode alterar a ação do botão (como neste exemplo), ou ser usada para acionar imediatamente uma ação relacionada.

Elevação desabilitada

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

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

API