Reusable Components: Button

Issue

Description

We need to create a reusable Button component. We should also be able to define children with any content. The button should receive two properties, onClick and theme.

<Button onClick={onClick}>Test</Button>

<Button onClick={onClick} theme="primary">
  <Image src={image} />
  <span>Some Text</span>
</Button>

[linux-nerd]

And instead of onPress I would suggest onClick event. This is a more generic event. This is helpful whenever we have to use cloneElement to clone some component/node React.cloneElement(component, { onClick: this.handleClick }) we can use generic onClick instead of onPress as it will work for both <Button /> and <button></button>

Something like this -

<Button onClick={onPress} label="Ok" classes={classes} icon={<FontAwesomeIcon />} theme="primary" />

[nitish24p]

@crysfel Instead should we have a generic button component which does

const Button = ({children, ...rest}) => {
  const classes = classNames(
    styles.button,
   // other styles based on props
  )
  return (
    <button {...rest} className={classes}>
      {children}
    </button>

  )
};

This way we neednt have a label prop, the children can be text, image, span, loader whatever? what say?