A Button, better way

Button.jsx

import React from 'react';
import cn from 'classnames';

type Props = {
  type?: 'normal' | 'outline',
  radius?: 'square' | 'round' | 'circle',
  size?: 'mini' | 'small' | 'normal' | 'large' | 'xlarge',
  theme?: 'action' | 'danger' | 'warning' | 'success' | 'info' | 'grey',
  children: string,
};

const Button = ({
  children, theme = 'action', type = 'normal',
  radius = 'square', size = 'normal', className,
  ...restProps
}: Props) => {
  const classes = cn(
    'Button', `Button--${type}`, `Button--${radius}`, `Button--${theme}`, `Button--${size}`, className,
  );

  return (
    <button className={classes} {...restProps} >
      {children}
    </button>
  );
};

/* Composable Buttons */
export const PrimaryButton = (props: Props) => (
  <Button theme="action" radius="circle" {...props}>
    {props.children}
  </Button>
);

export const SecondaryButton = (props: Props) => (
  <Button type="outline" theme="grey" radius="circle" {...props}>
    {props.children}
  </Button>
);

export const HeaderButton = (props: Props) => (
  <Button size="mini" type="outline" theme="action" radius="circle" {...props}>
    {props.children}
  </Button>
);

export default Button;