jorgemike
73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
/**
|
|
* Botón reutilizable con soporte para variantes de Bootstrap y personalización de íconos.
|
|
*
|
|
* @component
|
|
*/
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
/**
|
|
* Variante Bootstrap o personalizada. Ej: `primary`, `danger`, `mi-clase-custom`.
|
|
* @default "primary"
|
|
*/
|
|
variant?: string;
|
|
|
|
/**
|
|
* Si se usa variante `outline` (por ejemplo, `btn-outline-primary`).
|
|
* @default false
|
|
*/
|
|
outline?: boolean;
|
|
|
|
/**
|
|
* Ícono Bootstrap (`string`, como `check-circle`) o componente React.
|
|
*/
|
|
icon?: string | React.ReactNode;
|
|
|
|
/**
|
|
* Tamaño del botón: `sm` o `lg` para tamaños Bootstrap.
|
|
*/
|
|
size?: 'sm' | 'lg';
|
|
|
|
/**
|
|
* Clases adicionales personalizadas para el botón.
|
|
*/
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Componente `Button` con estilos de Bootstrap y soporte para íconos.
|
|
*/
|
|
const Button: React.FC<ButtonProps> = ({
|
|
children,
|
|
type = 'button',
|
|
icon,
|
|
className = '',
|
|
variant = 'primary',
|
|
outline = false,
|
|
disabled = false,
|
|
size,
|
|
...rest
|
|
}) => {
|
|
const btnVariant = outline ? `btn-outline-${variant}` : `btn-${variant}`;
|
|
const sizeClass = size ? `btn-${size}` : '';
|
|
const combinedClasses = `btn ${btnVariant} ${sizeClass} ${className}`.trim();
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
disabled={disabled}
|
|
className={combinedClasses}
|
|
{...rest}
|
|
>
|
|
{typeof icon === 'string' ? (
|
|
<i className={`me-2 bi bi-${icon}`}></i>
|
|
) : (
|
|
icon && <span className="me-2">{icon}</span>
|
|
)}
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|