ButtonGroup

Renderiza un grupo de botones en fila desde un arreglo buttons. Cada botón puede tener su propio texto, íconos, estilo, tipo, tamaño y un payload extraData que se pasa al handler onClick. Opcionalmente, los títulos pueden revelarse con un efecto de escritura secuencial.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | buttons | ButtonType[] | Sí | — | Arreglo de objetos de configuración de botones. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor envolvente. | | buttonStyle | React.CSSProperties | No | — | Estilos aplicados a todos los botones. | | enableAnimation | boolean | No | false | Activa la animación de escritura en los títulos. | | animationSpeed | number | No | 20 | Milisegundos por carácter de la animación. | | onAnimationComplete | () => void | No | — | Se ejecuta cuando todas las animaciones finalizan. |

Forma de ButtonType

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | title | string | Sí | Texto del botón. | | onClick | (extraData: any) => void | No | Handler del clic; recibe extraData. | | extraData | any | No | Datos arbitrarios enviados al handler. | | type | 'outline' \| 'clear' \| 'solid' | No | Estilo visual del botón. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | Tamaño del botón. | | startIcon | string | No | Ícono antes del título. | | endIcon | string | No | Ícono después del título. | | style | React.CSSProperties | No | Estilos individuales del botón. |

Uso

Básico

import ButtonGroup from '@/components/ButtonGroup';

const buttons = [
  { title: 'Editar', startIcon: 'edit', onClick: () => console.log('editar') },
  { title: 'Eliminar', startIcon: 'delete', onClick: () => console.log('eliminar') },
];

export default function Example() {
  return <ButtonGroup buttons={buttons} />;
}

Con extraData y animación

import ButtonGroup from '@/components/ButtonGroup';

const buttons = [
  {
    title: 'Ver Factura',
    startIcon: 'document',
    extraData: { facturaId: 42 },
    onClick: (data) => console.log('Factura:', data.facturaId),
  },
];

export default function Example() {
  return (
    <ButtonGroup
      buttons={buttons}
      enableAnimation
      animationSpeed={30}
      onAnimationComplete={() => console.log('Botones revelados')}
    />
  );
}