Saltar al contenido principal

wiki-Button-Group

Ver en Git

Button Group

El componente ButtonGroup agrupa varios botones en una sola línea, eliminando los bordes laterales entre ellos y aplicando bordes redondeados solo al primer y último botón. Es útil para crear conjuntos de acciones relacionadas que deben mostrarse juntas de forma visualmente cohesionada.

Props​

PropiedadTipoDefaultDescripción
childrenReact.ReactNode—Botones que se incluyen dentro del grupo.
classNamestring""Clase CSS adicional para el contenedor del grupo.
styleReact.CSSPropertiesundefinedEstilo inline para el contenedor del grupo.

Ejemplo de uso​

import { ButtonGroup, Button } from '@auravant/ui-kit';

 <ButtonGroup>
 <Button type="primary">Primero</Button>
 <Button type="primary">Intermedio</Button>
 <Button type="primary">Último</Button>
 </ButtonGroup>

Espacio​

Para que los botones contenidos dentro del componente ButtonGroup ocupen todo el espacio disponible considerá usar algo similar a esta porción de código:

import { ButtonGroup, Button } from '@auravant/ui-kit';

<ButtonGroup>
 <Button type="primary" style={{ flex: 1, margin: 0 }}>Primero</Button>
 <Button type="primary" style={{ flex: 1, margin: 0 }}>Intermedio</Button>
 <Button type="primary" style={{ flex: 1, margin: 0 }}>Último</Button>
</ButtonGroup>

Consideraciones​

  • Los hijos de ButtonGroup deberían ser instancias del componente Button, ya que el estilo del grupo se basa en clases específicas de estos botones.
  • Usá el componente en contenedores flex para evitar problemas de diseño si los botones tienen diferentes anchos.