npm package: @pecabtor/components
Description: Componente **Button** en React con TypeScript para botones estilizados con gradientes y opciones personalizables.
Latest version: 1.0.7

# @pecabtor/components – Botón Personalizable en React

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

---

## Instalación

```bash
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.

[![Abrir demo en CodesandBox](https://img.shields.io/badge/CodeSandBox-Online%20Demo-blue?logo=codesandbox)](https://codesandbox.io/p/sandbox/eloquent-wildflower-cycpsd)


## Uso básico

```tsx
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:**  
```tsx
<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](https://opensource.org/licenses/MIT).

Puedes consultar el archivo de licencia en este repositorio: [LICENSE](./LICENSE)