Composable Button

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' | 'grey' | 'danger' | 'warning' | 'success' | 'info',
  className?: string, // ever allow pass custom className
  styles?: string, // custom styles also
  children: string,
};

const Button = (props: Props) => {
  const { type, radius, etc, ...restProps } = props;// pass restProps at the end <button ... {...restProps} />
  /* Button markup logic */
};

Button.defaultProps = {
  type: 'normal',
  size: 'normal',
};

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

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

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

export default Button;