Grupo de botones

El componente ButtonGroup puede ser usado para agrupar botones relacionados.

Grupos de botones básicos

The standard Button variants are supported.

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

Tamaños y colores

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

<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 ButtonGroup can be displayed veritcally using the orientation prop.

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">
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

API

• <Button />
• <ButtonGroup />