Button.tsx

// import React from 'react';
// import { Box, system } from '@marigold/system';

// type ButtonProps = {};

// export const Button = system<ButtonProps, 'button'>(
//   ({ variant = 'primary.large', children, ...props }) => {
//     return (
//       <Box as="button" themeSection="button" variant={variant} {...props}>
//         <span style={{ display: 'inline-flex', alignItems: 'center' }}>
//           {children}
//         </span>
//       </Box>
//     );
//   }
// );

import React from 'react';
import { createStyles } from '@marigold/system';

const buttonStyles = createStyles('form', {
  bg: '#f98e28',
});

type ButtonProps = React.PropsWithChildren<{
  size: string[];
}>;

export const Button = ({ size, children, ...props }: ButtonProps) => {
  const classNames = buttonStyles(size);

  return (
    <button className={classNames} {...props}>
      {children}
    </button>
  );
};