Saltar al contenido
Ayuda a traducir esta página

Grupo de botones

El componente ButtonGroup puede ser usado para agrupar botones relacionados.

Grupos de botones básicos

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>

Tamaños y colores

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

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

Tamaños y colores

The ButtonGroup can be displayed veritcally using the orientation prop.

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