Conditional Render of ButtonAction component as <button> or <a>

ButtonAction.js

import React from "react";
import PropTypes from "prop-types";

import { flexAlignmentConvertor } from "../../utils/flexAlignmentConvertor";

import ButtonBase from "../ButtonBase/index";

import "./ButtonAction.scss";

export const defaultProps = {
  type: "primary",
  alignment: "left",
  minWidth: 100
};

const ButtonAction = props => {
  const {
    onClick,
    link,
    type,
    text,
    size,
    icon,
    paper,
    block,
    minWidth,
    grow,
    alignment,
    iconPosition
  } = props;

  const inlineStyle = {
    width: block ? "100%" : "",
    minWidth: minWidth ? defaultProps.minWidth : 0,
    justifyContent: alignment
      ? flexAlignmentConvertor(alignment)
      : flexAlignmentConvertor(defaultProps.alignment),
    flexGrow: grow ? 1 : 0
  };

  const renderChildren = () => {
    return (
      <ButtonBase
        text={text}
        size={size}
        icon={icon}
        iconPosition={iconPosition}
      />
    );
  };

  const renderClasses = () => {
    return `${`button-action-${type ? type : defaultProps.type}${
      paper ? "-paper" : ""
    }`}`;
  };

  return (
    <React.Fragment>
      {onClick && (
        <button
          onClick={e => onClick(e)}
          style={inlineStyle}
          className={renderClasses()}
        >
          {renderChildren()}
        </button>
      )}
      {link && (
        <a href={link} style={inlineStyle} className={renderClasses()}>
          {renderChildren()}
        </a>
      )}
    </React.Fragment>
  );
};

ButtonAction.defaultProps = defaultProps;

ButtonAction.propTypes = {
  onClick: PropTypes.func,
  link: PropTypes.string,
  type: PropTypes.oneOf(["primary", "secondary"]),
  text: PropTypes.string,
  size: PropTypes.string,
  icon: PropTypes.string,
  paper: PropTypes.bool,
  block: PropTypes.bool,
  minWidth: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
  grow: PropTypes.bool,
  alignment: PropTypes.oneOf(["left", "center", "right"]),
  iconPosition: PropTypes.oneOf(["", "reverse"])
};

export default ButtonAction;

Usage can then be:
<ButtonAction text="Button Action" onClick={() => clickHandler()} />
or
<ButtonAction text="Button Action" link="tel:+447708524030" />