SOLID React article, code snippet 6: Button component with variant

solid_react-006-ButtonV3.tsx

interface ButtonProps
  extends React.PropsWithChildren,
    React.HTMLAttributes<HTMLButtonElement> {
  variant?: 'solid' | 'outlined' | 'blank';
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

export const Button: React.FunctionComponent<ButtonProps> = ({
  children,
  variant = 'blank',
  onClick,
  ...props
}) => {
  const className = resolveClassName(variant);
  return (
    <button className={className} onClick={onClick} {...props}>
      {children}
    </button>
  );
};