Composable Button

Button.jsx

import React from 'react';

type Props = {
  type?: 'normal' | 'outline',
  radius: 'square' | 'round' | 'circle',
  size?: 'mini' | 'small' | 'normal' | 'large' | 'xlarge',
  theme?: 'primary' | 'grey' | 'danger' | 'warning' | 'success' | 'info',
  className?: string, // ever allow pass custom className
  style?: string, // custom styles also
  children: string,
};

const Button = (props: Props) => {
  /* Button markup logic */

  // pass restProps at the end of element.
  // eg.:
  //
  // const { type, radius, size, theme, /* etc */, ...restProps } = props;
  // return (
  //   <button ... {...restProps} />
  // );
};

Button.defaultProps = {
  type: 'normal',
  radius: 'round',
  size: 'normal',
  theme: 'primary',
};

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

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

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

Button.Primary = PrimaryButton;
Button.Secondary = SecondaryButton;
Button.Header = HeaderButton;

export default Button;
  
/*
  <PrimaryButton>Primary</PrimaryButton>
  <SecondaryButton>Secondary</SecondaryButton>
  <HeaderButton>Header Button</HeaderButton>

  or
  <Button.Primary>Primary</Button.Primary>
  etc...
*/