Grupo de botones

El componente ButtonGroup puede utilizarse para agrupar botones relacionados.

Grupo vertical

El grupo de botones puede mostrarse verticalmente utilizando la propiedad orientation;

ButtonGroup también puede utilizarse para crear un botón dividido. El desplegable puede cambiar la acción del botón (como en este ejemplo) o utilizarse para activar inmediatamente una acción relacionada.

Elevación deshabilitada

Puede eliminar la elevación con el disableElevation prop.

<ButtonGroup
  disableElevation
  variant="contained"
  aria-label="Grupo de botones desactivados"
>
  <Button>Uno</Button>
  <Button>Dos</Button>
</ButtonGroup>

<ButtonGroup
  disableElevation
  variant="contained"
  aria-label="Grupo de botones desactivados"
>
  <Button>Uno</Button>
  <Button>Dos</Button>
</ButtonGroup>

Press Enter to start editing

Cargando

Utiliza la propiedad loading de Button para poner los botones en estado de carga y desactivar las interacciones.

<ButtonGroup variant="outlined" aria-label="Grupo de botones de carga">
  <Button>Enviar</Button>
  <Button>Obtener datos</Button>
  <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
    Guardar
  </Button>
</ButtonGroup>

<ButtonGroup variant="outlined" aria-label="Grupo de botones de carga">
  <Button>Enviar</Button>
  <Button>Obtener datos</Button>
  <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
    Guardar
  </Button>
</ButtonGroup>

Press Enter to start editing

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

Grupo de botones

Grupo de botones básico

Variantes de botones

Tamaños y colores

Grupo vertical

Botón dividido

Elevación deshabilitada

Cargando

API