Button.js

// @flow

import * as React from "react";

type Props = {|
  /**
   * prevent `onClick` from being invoked
   */
  disabled?: boolean,
  /**
   * override default styles
   */
  style: any,
  /**
   * Method invoked on click
   */
  onClick: () => void,
  /**
   * Whether or not the button is primary blue
   */
  primary: boolean,
  /**
   * Combination of disabled and pointer: wating;
   */
  loading?: boolean
|};

/**
 * Buttons communicate the action that will occur when the user touches them
 *
 * [Source code](https://gist.github.com/hanford/7b0cbd3e91ffc3d2e8af7a2035425217)
 *
 * ## Usage
 *
 * ```js
 * import Button from 'system/Button'
 *
 * <Button primary disabled={false}>
 *   Press me
 * </Button>
 * ```
 *
 * ```live
 * () => {
 *  const [count, setCount] = React.useState(0)
 *
 *  return (
 *    <Button
 *      primary
 *      onClick={() => setCount(count + 1)}
 *    >
 *      Count: {count}
 *    </Button>
 *  )
 * }
 * ```
 *
 * ```live
 * <Button loading>
 *   Loading
 * </Button>
 * ```
 *
 *
 * @extends Base props https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#props
 */

export default function Button(props: Props) {
  return (
    <button
      {...props}
      disabled={props.disabled || props.loading}
      style={{
        ...props.style,
        display: "block",
        padding: "8px 16px",
        outline: "none",
        borderRadius: 4,
        cursor: props.loading
          ? "wait"
          : props.disabled
          ? "not-allowed"
          : "pointer",
        backgroundColor: props.primary ? "rgb(1, 116, 224)" : "white",
        borderColor: props.primary ? "rgb(1, 116, 224)" : "rgba(0,0,0,0.2)",
        color: props.primary ? "white" : "black",
        fontWeight: 600,
        fontSize: 16,
        opacity: props.loading || props.disabled ? 0.5 : 1
      }}
    >
      {props.children}
    </button>
  );
}

Button.displayName = "Button";

export const Submit = () => <Button>Submit</Button>;