@pecabtor/components – Botón Personalizable en React

Componente Button en React con TypeScript para botones estilizados con gradientes y opciones personalizables.

Instalación

npm install @pecabtor/components
# o
yarn add @pecabtor/components

Demo en línea

Puedes probar el componente Button directamente en CodeSandBox, sin necesidad de instalar nada localmente.

Uso básico

import { Button, ButtonIProps } from "@pecabtor/components";

const App = () => (
  <div>
    <Button
      buttonName="Botón ejemplo"
      variant="info"
      uppercase={true}
      bold={true}
      w="150px"
      h="40px"
      fontFamily="Arial"
      fontSize="16px"
      hoverEffect={true}
      borderRadius="12px"
      paddingLeft="20px"
      paddingRight="20px"
    />
  </div>
);

export default App;

Props disponibles

| Propiedad | Tipo | Descripción | | ------------------------------------------------------------ | ------------------------------------------------------------------------| -------------------------------- | | buttonName | string (requerido) | Texto del botón. | | variant | "success" \| "info" \| "warning" \| "danger" \| "default" \| "primary"| Define el color por tipo. | | hoverEffect | boolean | Activa el gradiente en :hover. | | borderRadius | string | Borde redondeado, ej. "10px". | | background | string | Color/fondo personalizado. | | color | string | Color del texto. | | fontFamily | string | Fuente. | | fontSize | string | Tamaño de fuente. | | uppercase | boolean | Texto en mayúsculas. | | bold | boolean | Texto en negrita. | | w, h | string | Ancho y alto. | | paddingLeft, paddingRight, paddingTop, paddingBottom | string | Espaciado interno. |

Soporte para eventos y atributos nativos

El componente Button acepta cualquier evento o atributo estándar que se le pueda pasar a un botón HTML en React. Esto incluye:

• Manejadores de eventos como onClick, onMouseEnter, onFocus, etc.

• Atributos estándar como type, disabled, aria-*, entre otros.

Esto es posible porque internamente el componente propaga automáticamente cualquier propiedad adicional al elemento <button> usando ...rest.

No necesitas modificar el componente para usar eventos ni lógica adicional: simplemente pasa tus props como lo harías en un <button> normal.

Ejemplo:

<Button
  buttonName="Click me"
  onClick={() => alert("¡Botón clickeado!")}
  disabled={false}
/>

Estilos incluidos por defecto

El componente incluye estilos CSS base para los botones, con gradientes de fondo y sombras, además de efectos hover para cada tipo.

| Tipo | Color base | Hover | | ------- | ---------- | ----------------- | | success | Verde | De claro a oscuro | | info | Azul | De claro a oscuro | | warning | Amarillo | De claro a oscuro | | danger | Rojo | De claro a oscuro | | default | Gris | De claro a oscuro | | primary | Azul | De claro a oscuro |

Nota:
Puedes sobrescribir estilos básicos con las props o añadiendo clases CSS adicionales.
Usa el prop hoverEffect para activar/desactivar el efecto hover.

📄 Licencia

Este componente está licenciado bajo la MIT License.

Puedes consultar el archivo de licencia en este repositorio: LICENSE