65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import type { BaseComponentProps, CallbackProps } from '../types';
|
|
import '../../styles/button.css';
|
|
|
|
/**
|
|
* Props for Button component
|
|
* FE-TYPE-013: Fully typed component props
|
|
* Enhanced with Fusion Design System variants
|
|
*/
|
|
export interface ButtonProps
|
|
extends BaseComponentProps,
|
|
CallbackProps,
|
|
Omit<
|
|
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
keyof BaseComponentProps | 'onClick' | 'onSubmit'
|
|
> {
|
|
children: React.ReactNode;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
disabled?: boolean;
|
|
variant?:
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'gaming'
|
|
| 'terminal'
|
|
| 'nature'
|
|
| 'graffiti'
|
|
| 'ghost'
|
|
| 'outline'
|
|
| 'destructive';
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
icon?: boolean;
|
|
}
|
|
|
|
export const Button = ({
|
|
children,
|
|
onClick,
|
|
type = 'button',
|
|
disabled = false,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
icon = false,
|
|
className = '',
|
|
...props
|
|
}: ButtonProps) => {
|
|
const baseClass = 'btn-veza';
|
|
const variantClass = `btn-veza--${variant}`;
|
|
const sizeClass = `btn-veza--${size}`;
|
|
const iconClass = icon ? 'btn-veza--icon' : '';
|
|
|
|
const classes = [baseClass, variantClass, sizeClass, iconClass, className]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={classes}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|