Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Grupo de botones

El componente ButtonGroup puede ser usado para agrupar botones relacionados.

Grupos de botones b谩sicos

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

Tama帽os y colores

<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贸n dividido

ButtonGroup tambi茅n puede ser empleado para crear un bot贸n dividido. El men煤 desplegable puede cambiar la acci贸n del bot贸n (como en este ejemplo), o ser utilizado para ejecutar inmediatamente una acci贸n relacionada.

Elevaci贸n deshabilitada

Se puede eliminar la elevaci贸n con la prop disableElevation.

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